/*
 * Lớp sơn cho bảng quản trị.
 *
 * Bảng màu, font và bề rộng đã khai ở `AdminPanelProvider` — Filament tự sinh
 * biến CSS từ đó. File này chỉ làm nốt những thứ không khai bằng tuỳ chọn
 * được: nhịp đường kẻ và khoảng thở.
 *
 * ============ BA CÁI BẪY, ĐÃ TRẢ GIÁ Ở REPO KHÁC ============
 *
 * 1. **Tên class là của Filament 5, và nó đã đổi giữa các bản chính.**
 *    `.fi-sidebar-item-button` thành `.fi-sidebar-item-btn`,
 *    `.fi-sidebar-item-active` thành `.fi-sidebar-item.fi-active`. Một selector
 *    không khớp gì thì hỏng LẶNG LẼ: đọc lên như thể nó nói điều đó, còn trang
 *    thì bỏ qua. Thêm luật mới thì phải mở trình duyệt xác nhận nó khớp.
 *
 * 2. **Không bao giờ gõ mã màu.** Dùng `var(--primary-600)`, đừng gõ hex —
 *    dải màu tới từ `PALETTE` trong provider, và một mã màu gõ tay ở đây là
 *    cách bảng này lệch khỏi thương hiệu mà không ai sửa nổi ở một chỗ.
 *
 * 3. **Đây KHÔNG phải theme Tailwind.** Không có bước build, không có npm
 *    trong lúc deploy. File này được đăng ký thành asset của Filament ở
 *    `AppServiceProvider` và `php artisan filament:assets` chép nó ra
 *    `public/`. Một theme Tailwind thật sẽ cho khớp từng pixel với component
 *    của Filament; nó cũng đặt lại một bộ công cụ node vào bản phát hành, đổi
 *    lấy khoảng cách giữa "bám theo nhận diện" và "chính là nhận diện".
 */

/* Nền trắng ngà của site, không phải xám lạnh mặc định. Ảnh trong tiệm ám vàng
   cam, và cả hai repo phải đứng trên cùng một nền.

   PHẢI có nhánh `.dark`. Dải màu trong `PALETTE` là các hằng số — `--gray-50`
   vẫn là `#FBFBFA` kể cả khi đang ở chế độ tối, nên một dòng trần ở đây ép nền
   trắng lên giao diện tối và chữ sáng biến mất trên đó. Chế độ mặc định của
   panel là `system`, nghĩa là máy của khách để tối thì bảng này mở ra đã tối
   sẵn — không phải một trạng thái hiếm ai gặp. */
.fi-body {
    background-color: var(--gray-50);
}

html.dark .fi-body {
    background-color: var(--gray-950);
}

/* ---------------------------------------------------------------------------
   Đường kẻ mảnh
   ---------------------------------------------------------------------------
   Wordmark `d'luxe` là những nét cực mảnh. Viền 1px màu nhạt là thứ nối bố cục
   của bảng này về lại với logo; viền dày mặc định kéo nó về phía "phần mềm
   quản lý kho".
*/
.fi-sidebar,
.fi-topbar,
.fi-section {
    border-color: var(--gray-200);
}

.fi-topbar {
    box-shadow: none;
    border-bottom: 1px solid var(--gray-200);
}

/* Bỏ đổ bóng của khối nội dung — site không có cái bóng nào, và một tấm thẻ
   nổi lên khỏi mặt giấy là ngôn ngữ của một thiết kế khác. */
.fi-section {
    box-shadow: none;
}

/* ---------------------------------------------------------------------------
   Điều hướng
   --------------------------------------------------------------------------- */

/* Nhãn nhóm ("Price list") gõ theo nhịp của site: chữ hoa, giãn rộng, mảnh —
   cùng cách dòng `HAIR & BEAUTY` được set trên logo. */
.fi-sidebar-group-label {
    font-size: 0.6875rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gray-500);
}

/* Mục đang mở: nền xanh nhạt nhất của dải, không phải một mảng đặc. */
.fi-sidebar-item.fi-active .fi-sidebar-item-btn {
    background-color: var(--primary-50);
}

/* ---------------------------------------------------------------------------
   Bảng
   ---------------------------------------------------------------------------
   Danh sách dịch vụ dựng bằng Split/Stack nên KHÔNG có thẻ <table> — xem ghi
   chú dài ở `MenuItemsTable`. Mấy luật dưới đây là cho phần khung mà Filament
   vẫn dựng quanh nó.
*/
.fi-ta-ctn {
    box-shadow: none;
    border: 1px solid var(--gray-200);
}

/* Hàng tiêu đề nhóm ("Section: Hair") — nền nhạt để mắt biết đó là nhãn chứ
   không phải một dịch vụ nữa. */
.fi-ta-group-header {
    background-color: var(--gray-100);
}

/* Nới chiều cao hàng. Bảng giá là thứ người ta quét bằng mắt chứ không đọc từng
   dòng, và khoảng thở giữa các hàng là thứ làm việc quét đó chạy được.

   Luật này TRƯỚC ĐÂY viết là `.fi-ta-row .fi-ta-record-content-ctn` và không
   khớp gì cả: hồi đó bảng dựng bằng Split/Stack nên Filament không sinh ra thẻ
   `<table>` nào, và `.fi-ta-row` không tồn tại. Đúng cái bẫy số 1 ghi ở đầu
   file — hỏng lặng lẽ, đọc lên vẫn như đang có tác dụng. Giờ bảng là bảng thật,
   nên luật nhắm vào `<td>`. */
.fi-ta-cell {
    /* Đo trước khi sửa: hàng cao 79px, trong khi bản thiết kế là 52px. Không
       phải do ô — `.fi-ta-text-item` bên trong tự đệm 16px trên và dưới, cộng
       với đệm của ô là 54px khoảng trắng quanh 24px chữ.

       Nên đệm dồn về MỘT chỗ: ô giữ một chút để hàng không dính vào đường kẻ,
       phần lớn khoảng thở nằm ở lớp trong. */
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

/* Đệm dọc nằm ở LỚP BỌC `.fi-ta-text` (16px trên + 16px dưới), không phải ở
   `.fi-ta-text-item` — bản sửa đầu tiên nhắm nhầm vào cái thứ hai nên hàng vẫn
   cao 101px cho hai dòng chữ. Đo rồi mới biết:

       4+4 (ô) + 16+16 (lớp bọc) + 6+6 (đoạn) + 24 (tên) + 4 + 20 (dòng phụ)

   Gom hết đệm về lớp bọc, đoạn bên trong để 0. */
.fi-ta-cell .fi-ta-text {
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
}

.fi-ta-cell .fi-ta-text-item {
    padding-top: 0;
    padding-bottom: 0;
}

/* Sàn chiều cao hàng: 52px, đúng bản vẽ.

   Sau khi gom đệm lại, hàng một dòng co còn 33px — gọn hơn bản vẽ, nhưng cả
   hàng là một ĐÍCH BẤM (chạm vào hàng mở form sửa), và 33px nằm dưới ngưỡng
   44px mà mọi hướng dẫn cảm ứng đặt ra. Đây là bảng người ta bấm bằng ngón cái
   trong lúc đứng. */
.fi-ta-row .fi-ta-cell {
    height: 3.25rem;
}

/* ---------------------------------------------------------------------------
   Nút
   --------------------------------------------------------------------------- */

/* Bo tròn hẳn, như mọi nút trên site. */
.fi-btn {
    border-radius: 9999px;
}

/* Trừ nút trong bảng và trong ô nhập — bo tròn hẳn ở cỡ nhỏ trông như viên
   thuốc lạc chỗ, và nó phá mất mép thẳng của hàng. */
.fi-ta-actions .fi-btn,
.fi-input-wrp .fi-btn {
    border-radius: 0.5rem;
}

/* ===========================================================================
   BẢNG QUẢN TRỊ TRÊN ĐIỆN THOẠI
   ===========================================================================
   Mọi thứ dưới đây dựng theo bản thiết kế "Admin Mobile Redesign", hướng 1b.
   Số đo lấy thẳng từ file thiết kế; mã màu thì KHÔNG — chúng khớp đúng các bậc
   trong `PALETTE` của provider, nên viết bằng biến (xem bẫy số 2 ở đầu file):

       #F2F4F5 = gray-100      #E4E8EB = gray-200      #94A3AC = gray-400
       #64727E = gray-500      #16212B = gray-900      #0D1418 = gray-950
       #1F7BA5 = primary-700   #2C8FBB = primary-600

   1024px là ngưỡng của chính Filament: từ đó sidebar hiện ra. Thanh tab và
   sidebar không bao giờ cùng xuất hiện.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   Thanh tab dưới đáy
   --------------------------------------------------------------------------- */

.dl-tabbar {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    /* Trên overlay của sidebar (z-20) nhưng dưới modal — sửa một dịch vụ mở
       popup, và thanh tab không được nổi lên trên form đang mở. */
    z-index: 20;
    display: flex;
    align-items: center;
    background-color: rgb(255 255 255 / 0.96);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--gray-200);
    /* 0.5rem là khoảng thở của bản vẽ; phần cộng thêm là vạch home của iPhone.
       Gõ cứng 22px như trong file thiết kế thì máy Android và trình duyệt máy
       tính lĩnh một dải trống không có lý do gì tồn tại. */
    padding-bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px));
}

html.dark .dl-tabbar {
    background-color: rgb(13 20 24 / 0.96);
    border-top-color: var(--gray-800);
}

@media (min-width: 1024px) {
    .dl-tabbar {
        display: none;
    }
}

.dl-tabbar-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 0 8px;
    color: var(--gray-400);
    text-decoration: none;
    /* Chạm vào một tab không được để lại vệt xám của WebKit — thanh này bấm
       liên tục, và vệt đó đọc như một lỗi hiển thị. */
    -webkit-tap-highlight-color: transparent;
}

.dl-tabbar-tab.dl-is-active {
    color: var(--primary-700);
}

html.dark .dl-tabbar-tab.dl-is-active {
    color: var(--primary-400);
}

.dl-tabbar-icon {
    width: 24px;
    height: 24px;
    stroke-width: 1.7;
}

.dl-tabbar-label {
    font-size: 10px;
    font-weight: 500;
    line-height: 1;
}

.dl-tabbar-tab.dl-is-active .dl-tabbar-label {
    font-weight: 600;
}

/* Nút thêm: một chỗ trống rộng 76px giữa hàng tab, và một vòng tròn nhô lên
   khỏi thanh. Nhô lên chứ không nằm gọn trong thanh vì thanh chỉ cao chừng
   58px — một vòng tròn 52px nằm trong đó thì chạm mép cả trên lẫn dưới. */
.dl-tabbar-add-slot {
    width: 76px;
    display: flex;
    justify-content: center;
}

.dl-tabbar-add {
    width: 52px;
    height: 52px;
    margin-top: -18px;
    border-radius: 9999px;
    background-color: var(--primary-600);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 18px rgb(31 123 165 / 0.4);
    -webkit-tap-highlight-color: transparent;
}

.dl-tabbar-add-icon {
    width: 24px;
    height: 24px;
    stroke-width: 2;
}

/* ---------------------------------------------------------------------------
   Chỗ cho thanh tab, và cái hamburger không còn việc gì để làm
   --------------------------------------------------------------------------- */

@media (max-width: 1023.98px) {
    /* Không có dòng này thì hàng cuối của bảng giá nằm dưới thanh tab — và nó
       là hàng người ta vừa kéo xuống để xem. */
    .fi-main {
        padding-bottom: 6.5rem;
    }

    /* Điều hướng đã nằm ở đáy màn hình. Để cái hamburger lại là mời người ta
       mở một ngăn kéo bày đúng ba mục đã có sẵn dưới ngón tay họ. */
    .fi-topbar-open-sidebar-btn {
        display: none;
    }
}

/* ---------------------------------------------------------------------------
   Bảng giá: hai cột số, thẳng hàng
   ---------------------------------------------------------------------------
   Filament đặt tên class theo tên cột (`fi-ta-cell-price-cents`), nên nhắm
   được từng cột mà không phải đếm `nth-child` — thứ sẽ lệch đúng vào ngày ai
   đó chèn thêm một cột.
*/

.fi-ta-cell-special-price-cents,
.fi-ta-header-cell-special-price-cents,
.fi-ta-cell-price-cents,
.fi-ta-header-cell-price-cents {
    /* `width` trên `<td>` là gợi ý, không phải lệnh — trình duyệt vẫn nới thêm
       nếu nội dung cần. Cặp này giữ cột đúng bề ngang của bản vẽ mà vẫn cho
       "from $250" thở, và `nowrap` để một cái giá không bao giờ gãy làm đôi. */
    width: 1%;
    white-space: nowrap;
    /* Chữ số đều bề ngang: hàng đơn vị của mọi dòng xếp thẳng cột. Không có nó
       thì $140 và $299 lệch nhau vài pixel và cả cột trông như bị rung. */
    font-variant-numeric: tabular-nums;
}

.fi-ta-cell-special-price-cents .fi-ta-text-item-label {
    font-size: 0.9375rem;
    font-weight: 600;
}

.fi-ta-cell-price-cents .fi-ta-text-item-label {
    font-size: 0.9375rem;
}

/* Nhãn cột — chữ hoa, mảnh, giãn rộng, cùng nhịp với nhãn nhóm trong sidebar. */
.fi-ta-header-cell {
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* Trả việc cuộn về cho TRANG — ở MỌI bề ngang.

   `.fi-ta-content-ctn` mặc định là `overflow: auto`, tức một khung cuộn riêng
   bọc lấy bảng. Nó có lý do tồn tại: bảng rộng hơn màn hình thì cuộn ngang
   trong đó thay vì đẩy cả trang. Nhưng bảng này đã được đo cho vừa khít bề
   ngang ở mọi cỡ màn, nên khung đó không còn gì để cuộn — mà vẫn phá một thứ:
   `position: sticky` bám vào khung cuộn GẦN NHẤT.

   Hai kiểu hỏng, và đã gặp cả hai:

    - Trên điện thoại: hàng nhãn ghim vào mép trên của khung, rồi trôi khỏi màn
      hình cùng với khung. Đo được `th` ở y=0 của khung trong khi màn hình đã
      cuộn qua từ lâu.
    - Trên desktop: `top: 4rem` được tính từ mép khung chứ không phải từ màn
      hình, nên ngay ở scrollY=0 hàng nhãn đã bị đẩy xuống 64px — để lại một
      dải trống bên trên và che mất hàng tiêu đề nhóm ngay bên dưới. Đo được
      `thead` ở y=354 còn `th` ở y=418.

   Bản vá đầu chỉ đặt luật này trong media query của điện thoại, nên desktop
   giữ nguyên lỗi thứ hai. Nó phải áp dụng ở mọi bề ngang.
*/
.fi-ta-content-ctn {
    overflow: visible;
}

/* Ghim hàng nhãn xuống dưới topbar khi cuộn.

   Đây là chỗ bản dựng này khác bản vẽ: file thiết kế in lại `MON–WED` /
   `THU–SUN` ở tiêu đề mỗi nhóm, thứ Filament không cho chèn vào tiêu đề nhóm
   (xem ghi chú ở `MenuItemsTable`). Ghim `<thead>` cho kết quả mạnh hơn — nhãn
   hiện suốt lúc cuộn, không chỉ ở đầu mỗi nhóm.

   `top` phải khớp CHIỀU CAO THẬT của topbar (64px, đã đo). Lệch xuống thì nhãn
   nấp một nửa sau topbar; lệch lên thì hở một khe nhìn thấy nội dung chạy qua.
   `z-index` phải trên hàng tiêu đề nhóm, dưới topbar. */
.fi-ta-table thead th {
    position: sticky;
    top: 4rem;
    z-index: 2;
    background-color: var(--gray-100);
}

html.dark .fi-ta-table thead th {
    background-color: var(--gray-800);
}

/* Hàng tiêu đề nhóm: nền nhạt, tên section đậm vừa.

   Tô nền lên `<tr>` chứ không lên ô: ô tiêu đề nhóm có `colspan` KHÔNG phủ hết
   số cột (cột nút ở cuối nằm ngoài), nên tô lên ô thì dải xám hụt một khoảng ở
   mép phải — trông như hàng bị cắt dở. */
.fi-ta-group-header-row {
    background-color: var(--gray-100);
}

html.dark .fi-ta-group-header-row {
    background-color: var(--gray-800);
}

.fi-ta-group-header {
    background-color: transparent;
}

.fi-ta-group-heading {
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* Tên dịch vụ: cỡ chữ của bản vẽ, và xuống dòng chứ không cắt cụt. Một cái tên
   bị cắt thành "Full head of foils + collagen tre…" là dòng người ta phải mở ra
   mới biết là dòng nào. */
.fi-ta-cell-name .fi-ta-text-item-label {
    font-size: 0.875rem;
    line-height: 1.35;
}

@media (max-width: 767.98px) {
    /* Bóp lề ngang trên màn hẹp. Ở 320px, 16px mỗi bên nhân bốn cột là 128px
       bốc hơi trước khi có chữ nào được in. */
    .fi-ta-cell,
    .fi-ta-header-cell,
    .fi-ta-group-header-cell {
        padding-inline: 0.625rem;
    }

    /* Cột giá bóp lề còn hẹp hơn nữa, và chữ nhỏ hơn một nấc: "from $250" là
       chuỗi dài nhất có thể xuất hiện ở đây, và ở 15px nó gãy làm hai dòng
       trong 80px. 14px vừa. */
    .fi-ta-cell-special-price-cents,
    .fi-ta-header-cell-special-price-cents,
    .fi-ta-cell-price-cents,
    .fi-ta-header-cell-price-cents {
        padding-inline: 0.375rem;
    }

    .fi-ta-cell-special-price-cents .fi-ta-text-item,
    .fi-ta-cell-price-cents .fi-ta-text-item {
        font-size: 0.875rem;
    }

    /* -----------------------------------------------------------------------
       KHÔNG CUỘN NGANG — đo, không đoán
       -----------------------------------------------------------------------
       Bản dựng đầu tiên trông đúng nhưng bảng rộng 451px trong khung 288px.
       Trang KHÔNG báo tràn, vì phần thừa nằm gọn bên trong `.fi-ta-ctn`; cuộn
       ngang vẫn có thật, chỉ là nó trốn trong một cái hộp. Bài học: đo bề ngang
       của chính cái BẢNG, đừng đo `document.scrollWidth`.

       Cách chữa không phải ép `table-layout: fixed` — đã thử, và trong bảng của
       Filament có mấy cột mắt không thấy (ô tick, cột `is_active` chỉ hiện từ
       `md`, cột nút, tay cầm kéo-thả chỉ có ở `<tbody>`), nên phần thừa chảy
       vào chúng và cột tên còn 31px.

       Cách chữa là bỏ bớt nhu cầu bề ngang, rồi để bố cục `auto` tự chia:
       giấu hai cột không dùng tới trên điện thoại, và cho tên dịch vụ xuống
       dòng. Còn lại vừa khít — đã đo ở 320px.
    ----------------------------------------------------------------------- */

    /* Bố cục `fixed` + phần trăm cho CẢ BA cột nhìn thấy được.

       `auto` không dùng được: bề ngang cột do nội dung quyết định, và cột giá
       đòi 115px mỗi cột dù chữ trong đó chỉ rộng 59px — bên trong ô còn một
       lớp `<button class="fi-ta-col">` của Filament mà mình không điều khiển
       được từ đây.

       `fixed` mà chỉ khai hai cột giá cũng không dùng được: phần thừa chảy vào
       những cột mắt không thấy (ô tick, `is_active` dưới `md`, cột nút) và cột
       tên còn 31px.

       Khai đủ 100% cho ba cột nhìn thấy được thì không còn gì để chảy đi đâu.
       Ở 320px: tên 138px, hai cột giá 78px và 72px — đủ cho "from $250" xuống
       hai dòng chứ không đẩy bảng ra khỏi màn hình. */
    .fi-ta-table {
        table-layout: fixed;
        width: 100%;
    }

    .fi-ta-cell-name,
    .fi-ta-header-cell-name {
        width: 46%;
        /* Filament đặt `nowrap` cho mọi ô; không gỡ thì tên dịch vụ tràn ra
           ngoài ô thay vì xuống dòng. */
        white-space: normal;
    }

    .fi-ta-cell-special-price-cents,
    .fi-ta-header-cell-special-price-cents {
        width: 28%;
        white-space: normal;
    }

    .fi-ta-cell-price-cents,
    .fi-ta-header-cell-price-cents {
        width: 26%;
        white-space: normal;
    }

    /* Bảng Sections chỉ có hai cột, nên bộ phần trăm ở trên (46/28/26) không
       áp dụng được: cột `name` nhận 46% và công tắc lĩnh phần còn lại, thành ra
       tên section bị bóp trong khi nửa màn hình bỏ trống. */
    .fi-ta-cell-is-active,
    .fi-ta-header-cell-is-active {
        width: 5.5rem;
    }

    .fi-ta-table:has(.fi-ta-cell-is-active):not(:has(.fi-ta-cell-price-cents)) .fi-ta-cell-name,
    .fi-ta-table:has(.fi-ta-cell-is-active):not(:has(.fi-ta-cell-price-cents)) .fi-ta-header-cell-name {
        width: auto;
    }

    /* Ô tick chọn nhiều dòng — cả ở hàng thường lẫn ở hàng tiêu đề nhóm.

       Nó chiếm 36px trong 320px để phục vụ xoá hàng loạt — việc bản thiết kế
       không vẽ và gần như không ai làm trên điện thoại. Từ `md` trở lên nó
       quay lại, cùng nhóm hành động hàng loạt. */
    .fi-ta-selection-cell,
    .fi-ta-group-selection-cell {
        display: none;
    }

    /* Nút "Edit" ở cuối mỗi hàng.

       Chạm vào hàng đã mở form rồi (`recordAction('edit')` trong
       `MenuItemsTable`), nên cột này là cùng một hành động làm lần thứ hai,
       tốn 65px. Ô trong `<tbody>` KHÔNG có class riêng — Filament chỉ in
       `<td class="fi-ta-cell">` — nên phải bắt bằng `:last-child`. Nếu bản
       Filament nào đó thêm một cột sau cột nút, luật này bắt nhầm cột đó; dấu
       hiệu là nút Edit bỗng hiện lại trên điện thoại. */
    .fi-ta-actions-header-cell,
    .fi-ta-row > .fi-ta-cell:last-child {
        display: none;
    }

    /* Ô tick chọn nhiều dòng: ẩn dưới `md`.

       Nó chiếm 40px trong 320px — một phần tám màn hình — để phục vụ xoá hàng
       loạt, việc mà bản thiết kế không vẽ và gần như không ai làm trên điện
       thoại. Từ `md` trở lên nó quay lại, cùng với nhóm hành động hàng loạt. */
    .fi-ta-selection-cell {
        display: none;
    }
}

/* ---------------------------------------------------------------------------
   Ô tìm kiếm và ba tab lọc
   --------------------------------------------------------------------------- */

@media (max-width: 767.98px) {
    /* Bản vẽ để ô tìm kiếm chiếm trọn bề ngang, ngay dưới tiêu đề. Mặc định
       Filament nhét nó vào góc phải thanh công cụ, rộng chừng một phần ba —
       với 39 dịch vụ thì tìm kiếm là việc thường làm nhất ở màn hình này. */
    .fi-ta-search-field {
        width: 100%;
        max-width: none;
        flex: 1;
    }

    /* Thanh công cụ đo được cao 113px mà gần như trống: Filament xếp hàng nút
       kéo-thả / hành động hàng loạt lên một dòng riêng, rồi ô tìm kiếm căn
       giữa ở dòng dưới. Gom lại một dòng, tìm kiếm gánh phần co giãn. */
    .fi-ta-header-toolbar {
        flex-wrap: nowrap;
        gap: 0.5rem;
        padding: 0.75rem;
    }

    /* Nút "New service" / "New section" trong đầu trang: nút `+` ở thanh tab
       dưới đáy đã làm đúng việc đó, ngay tầm ngón cái. Hai nút cùng chức năng
       trên một màn hình điện thoại là một nút thừa và một dòng tiêu đề bị đẩy
       xuống.

       Ẩn bằng MỘT CLASS gắn thẳng vào action, không phải bằng
       `.fi-page-header-main-ctn .fi-ac`. Luật rộng đó đã nuốt luôn nút "Save"
       của màn hình Banner — cũng là một action ở đầu trang — nên màn hình đó
       không còn cách nào lưu trên điện thoại. Ẩn theo vị trí thì trúng cả
       những nút chưa tồn tại lúc viết luật. */
    .dl-mobile-hidden {
        display: none;
    }
}

/* Ba tab lọc dựng thành một dải phân đoạn như bản vẽ, thay vì hàng tab gạch
   chân mặc định của Filament. */
.fi-tabs {
    display: flex;
    gap: 4px;
    padding: 3px;
    background-color: var(--gray-100);
    border-radius: 10px;
    box-shadow: none;
}

/* Trọn bề ngang CHỈ trên điện thoại.

   Mặc định `.fi-tabs` là `inline-flex`, nên dải phân đoạn co quanh chữ và trôi
   vào giữa trang — trên điện thoại đó là ba đích bấm hẹp lửng lơ, nên bản thiết
   kế kéo chúng ra trọn bề ngang.

   Trên desktop thì ngược lại: `width: 100%` kéo ba chữ "All / On site / Hidden"
   ra 1120px, mỗi chữ một mình giữa một khoảng trống bằng nửa gang tay. Đo được
   đúng con số đó trước khi có luật này. */
@media (max-width: 767.98px) {
    .fi-tabs {
        width: 100%;
    }
}

html.dark .fi-tabs {
    background-color: var(--gray-800);
}

.fi-tabs-item {
    flex: 1;
    justify-content: center;
    padding: 7px 0;
    border-radius: 8px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--gray-500);
}

.fi-tabs-item.fi-active {
    background-color: #fff;
    color: var(--gray-950);
    font-weight: 600;
    box-shadow: 0 1px 2px rgb(13 20 24 / 0.08);
}

html.dark .fi-tabs-item.fi-active {
    background-color: var(--gray-950);
    color: var(--gray-50);
}

/* ---------------------------------------------------------------------------
   Hai ô giá trong form sửa
   --------------------------------------------------------------------------- */

.dl-price-box {
    padding: 0.75rem;
    border: 1px solid var(--gray-200);
    border-radius: 0.75rem;
    background-color: var(--gray-50);
}

html.dark .dl-price-box {
    border-color: var(--gray-800);
    background-color: var(--gray-900);
}

/* Con số là thứ người ta tới đây để đổi, nên nó là chữ to nhất trong ô — nhưng
   không to hơn chỗ nó có. Ở 1.25rem, "850" bị cắt còn "85C" trong ô rộng 119px
   của màn hình 390px, vì tiền tố `$` cũng ăn một phần bề ngang. */
.dl-price-box input {
    font-size: 1.125rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Ba viên chọn cách viết nằm MỘT hàng, chia đều.

   Hộp chứa đã là flex sẵn, nhưng mỗi viên rộng 55px trong khi hộp chỉ có 93px,
   nên chúng xuống dòng thành ba tầng. Cho mỗi viên `flex: 1` và bóp lề ngang
   thì ba viên chia nhau 93px — 31px một viên, đủ cho `$`, `from`, `$+`. */
.dl-price-box .fi-fo-toggle-buttons {
    gap: 0.25rem;
}

.dl-price-box .fi-fo-toggle-buttons-btn-ctn {
    flex: 1;
    min-width: 0;
}

.dl-price-box .fi-fo-toggle-buttons-btn-ctn .fi-btn {
    width: 100%;
    padding-inline: 0.25rem;
}

/* ---------------------------------------------------------------------------
   Màn hình "More"
   --------------------------------------------------------------------------- */

.dl-more {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.dl-more-search {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--gray-200);
    border-radius: 0.75rem;
    background-color: #fff;
}

html.dark .dl-more-search {
    border-color: var(--gray-800);
    background-color: var(--gray-900);
}

.dl-more-search-icon {
    width: 18px;
    height: 18px;
    color: var(--gray-400);
    flex: none;
}

.dl-more-search input {
    flex: 1;
    border: 0;
    padding: 0;
    background: transparent;
    font-size: 0.875rem;
    color: inherit;
}

.dl-more-search input:focus {
    outline: none;
}

.dl-more-group h2 {
    font-size: 0.6875rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gray-500);
    margin-bottom: 0.625rem;
}

/* Lưới tự co: hai ô một hàng trên điện thoại, nhiều hơn khi có chỗ. `auto-fill`
   chứ không phải số cột cố định — danh sách này dựng từ cây điều hướng, nên số
   ô đổi mà không ai sửa file này. */
.dl-more-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
    gap: 0.625rem;
}

.dl-more-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.875rem;
    min-height: 5.5rem;
    border: 1px solid var(--gray-200);
    border-radius: 0.75rem;
    background-color: #fff;
    color: var(--gray-900);
    text-decoration: none;
}

html.dark .dl-more-tile {
    border-color: var(--gray-800);
    background-color: var(--gray-900);
    color: var(--gray-100);
}

.dl-more-tile.dl-is-active {
    border-color: var(--primary-500);
    background-color: var(--primary-50);
}

html.dark .dl-more-tile.dl-is-active {
    background-color: var(--primary-950);
}

.dl-more-tile-icon {
    width: 22px;
    height: 22px;
    color: var(--primary-700);
}

.dl-more-tile-label {
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.3;
}

.dl-more-tile-badge {
    position: absolute;
    top: 0.875rem;
    inset-inline-end: 0.875rem;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--gray-500);
}

.dl-more-signout {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.875rem;
    border: 1px solid var(--gray-200);
    border-radius: 0.75rem;
    background-color: #fff;
    font-size: 0.875rem;
}

html.dark .dl-more-signout {
    border-color: var(--gray-800);
    background-color: var(--gray-900);
}

.dl-more-signout button {
    color: var(--danger-600);
    font-weight: 500;
}

/* ---------------------------------------------------------------------------
   Xem trước banner
   --------------------------------------------------------------------------- */

.dl-banner-preview h2 {
    font-size: 0.6875rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gray-500);
    margin-bottom: 0.625rem;
}

/* Cùng hình dạng với khối banner thật ngoài `/services`: nền xanh nhạt nhất
   của dải, không viền, câu đậm rồi câu giải thích. */
.dl-banner-preview-card {
    padding: 1rem 1.125rem;
    border-radius: 0.75rem;
    background-color: var(--primary-50);
}

html.dark .dl-banner-preview-card {
    background-color: var(--primary-950);
}

.dl-banner-preview-headline {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--primary-900);
}

html.dark .dl-banner-preview-headline {
    color: var(--primary-100);
}

.dl-banner-preview-note {
    margin-top: 0.375rem;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--primary-800);
}

html.dark .dl-banner-preview-note {
    color: var(--primary-200);
}

.dl-banner-preview-column {
    margin-top: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: var(--gray-500);
}

.dl-banner-preview-chip {
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--primary-700);
}

/* ---------------------------------------------------------------------------
   Desktop: kéo giá lại gần tên dịch vụ
   --------------------------------------------------------------------------- */

/* Bảng chọn cách gộp nhóm ("Group by · Section · Ascending / Descending").

   Cách gộp ở bảng này KHÔNG phải một lựa chọn: nó cố định theo section, vì đó
   là cách bảy tấm tờ rơi của tiệm được tổ chức và là cách duy nhất 39 dòng có
   nghĩa (xem `MenuItemsTable`). Ba ô điều khiển 315px cho một lựa chọn không
   có lựa chọn nào khác là chỗ để bấm nhầm, không phải tính năng. */
.fi-ta-grouping-settings {
    display: none;
}

@media (min-width: 768px) {
    /* Chia cột bằng phần trăm, bố cục `fixed`.

       Thử `max-width: 30rem` trên ô tên trước — KHÔNG ăn. Trình duyệt bỏ qua
       `max-width` của `<td>` khi tính bề rộng cột ở bố cục `auto`; luật đọc
       lên như đang có tác dụng mà cột vẫn 535px. Đúng loại hỏng lặng lẽ mà đầu
       file này cảnh báo.

       `fixed` + phần trăm là cách đã kiểm chứng ở phần điện thoại: khai đủ cho
       MỌI cột nhìn thấy được thì không còn gì để phần thừa chảy vào. Cột tên
       48% giữ tên dài nhất trên một dòng, ba cột còn lại đứng ngay sau nó thay
       vì trôi ra tận mép phải. */
    .fi-ta-table {
        table-layout: fixed;
        width: 100%;
    }

    .fi-ta-cell-name,
    .fi-ta-header-cell-name {
        width: 48%;
        white-space: normal;
    }

    .fi-ta-cell-special-price-cents,
    .fi-ta-header-cell-special-price-cents,
    .fi-ta-cell-price-cents,
    .fi-ta-header-cell-price-cents {
        width: 11%;
    }

    .fi-ta-cell-is-active,
    .fi-ta-header-cell-is-active {
        width: 11%;
    }

    /* Ô tick và cột nút: khai bề rộng để phần thừa không dồn vào chúng.

       Phải viết `.fi-ta-cell.fi-ta-selection-cell` — HAI class, không phải một.
       Filament có sẵn luật cùng tên với hai class, và `.fi-ta-selection-cell`
       trần thua nó về specificity: luật đọc lên như đang đặt bề rộng, còn cột
       thì rộng 168px. Đã tra bằng `CSS.getMatchedStylesForNode` chứ không đoán. */
    .fi-ta-cell.fi-ta-selection-cell,
    .fi-ta-header-cell:first-child {
        width: 3rem;
    }

    .fi-ta-actions-header-cell {
        width: 6rem;
    }

    /* Ba tab lọc thẳng lề trái với bảng bên dưới.

       Filament đặt `margin-inline: auto` qua `.fi-tabs:not(.fi-contained)`, nên
       dải phân đoạn trôi vào giữa trang trong khi cái bảng nó lọc thì căn trái
       — hai vật thể cùng một cụm mà không thẳng hàng nhau. */
    .fi-tabs:not(.fi-contained) {
        margin-inline: 0;
    }
}