/*
 * 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. */
.fi-body {
    background-color: var(--gray-50);
}

/* ---------------------------------------------------------------------------
   Đườ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. */
.fi-ta-row .fi-ta-record-content-ctn {
    padding-top: 0.875rem;
    padding-bottom: 0.875rem;
}

/* ---------------------------------------------------------------------------
   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;
}