/* ============================================================
   GIAO DIỆN QUẢN TRỊ — LỚP TÙY BIẾN
   ============================================================
   Bản trước đây phủ lên Filament một lớp "kính mờ" (glassmorphism):
   nền trắng trong suốt, bo góc 16px, đổ bóng xanh tím, nút bấm gradient
   tím-chàm, nền trang chuyển sắc, ô nhập viền tím. Nhìn thì lạ mắt nhưng:

   1. LÀM HỎNG MỌI MENU "..." TRONG BẢNG.
      `backdrop-filter` đặt lên .fi-ta-content khiến khung bảng trở thành
      containing block của các phần tử position:fixed. Menu thả xuống của
      Filament dùng đúng cơ chế đó, nên nó bị tính sai gốc toạ độ (lệch đúng
      bằng khoảng cách từ đỉnh màn hình tới đỉnh bảng), bị đẩy ngược lên trên
      và bị khung bảng cắt mất — người dùng thấy một ô trắng rỗng.
      Đây là lỗi thật đã gặp ở menu "Khác" của Luân chuyển kho.

   2. LÀM CHỮ SỐ KHÓ ĐỌC. Nền trắng 80% trong suốt trên nền chuyển sắc làm
      giảm tương phản, mà đây là màn hình người ta đọc số tiền.

   3. MÀU KHÔNG CÒN Ý NGHĨA. Nút nào cũng gradient tím nên nút quan trọng
      không nổi hơn nút thường.

   Nguyên tắc bản này: nền đặc, viền mảnh, bo góc vừa phải, và MÀU CHỈ DÙNG
   KHI CÓ Ý NGHĨA. Màu nhấn theo đúng màu primary đã khai trong panel (xanh
   dương), không tự đặt màu riêng.
   ============================================================ */

:root {
    --admin-line: #e2e8f0;
    --admin-ink: #0f172a;
    --admin-muted: #64748b;
}

/* Nền trang: một màu xám rất nhạt, đủ để thẻ trắng nổi lên. */
body {
    background-color: #f6f7f9 !important;
}

/* Khung bảng và thẻ số liệu: nền đặc, viền mảnh.
   TUYỆT ĐỐI KHÔNG dùng backdrop-filter / filter / transform ở đây — xem lý do
   số 1 trong phần đầu file. */
.fi-ta-ctn,
.fi-wi-stats-overview-stat {
    background: #ffffff;
    border: 1px solid var(--admin-line);
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.fi-ta-content {
    background: #ffffff;
}

/* Nút bấm: bo góc vừa, không viên thuốc. Màu để Filament tự lo theo panel. */
.fi-btn {
    border-radius: 8px !important;
}

/* Ô nhập liệu */
.fi-input,
.fi-select-input {
    border-radius: 8px !important;
}

/* Tiêu đề cột bảng */
.fi-ta-header-cell {
    background-color: #f8fafc !important;
    text-transform: uppercase !important;
    font-size: 0.75rem !important;
    letter-spacing: 0.05em !important;
    color: var(--admin-muted) !important;
    font-weight: 700 !important;
}

/* Cỡ biểu tượng nút và kiểu ô chọn bị khóa nằm trong renderHook của
   AdminPanelProvider — cố ý không lặp lại ở đây để chỉ có một nơi phải sửa. */

/* ─────────────────────────────────────────────────────────────
   ĐÃ GỠ: GHIM CỘT THAO TÁC VÀO MÉP PHẢI.

   Từng ghim cột thao tác để cứu bảng Đơn hàng rộng hơn màn hình. Nhưng
   `position: sticky` kèm z-index biến Ô THAO TÁC CỦA TỪNG DÒNG thành một
   stacking context riêng. Menu "Khác" nằm bên trong ô của dòng 1, nên ô
   thao tác của các dòng PHÍA DƯỚI — đứng sau trong DOM, cùng z-index —
   phủ đè lên nguyên cả menu đó. Kết quả: bấm "Khác" thì menu mở ra thật,
   nằm đúng chỗ, nhưng bị các dòng dưới che kín nên không thấy gì.

   Không có cách nào bằng CSS thuần để nâng riêng dòng đang mở menu lên
   trên, vì Filament không đánh dấu dòng đó.

   Nguyên nhân gốc (bảng quá rộng) đã xử lý đúng chỗ của nó: bỏ cột Mã đơn
   và gộp Còn nợ vào cột Tổng tiền trong OrderResource, bảng vừa khít màn
   hình. ĐỪNG ghim lại cột này.
   ───────────────────────────────────────────────────────────── */

/* ─────────────────────────────────────────────────────────────
   GHIM TIÊU ĐỀ CỘT (Sticky header) — đã kiểm chứng trên site thật.
   Bí quyết: khung bảng (.fi-ta-content) của Filament có overflow:auto
   nên nó "nuốt" sticky. Phải cho CHÍNH khung đó một chiều cao giới hạn
   để nó tự cuộn bên trong; khi đó thead dính top:0 so với khung là chuẩn.
   Nếu muốn bảng cao/thấp hơn, chỉnh số 12rem bên dưới.

   Lưu ý: overflow ở đây KHÔNG cắt menu thả xuống, vì menu là position:fixed
   và chỉ bị cắt bởi tổ tiên tạo containing block (transform/filter/…).
   Miễn là không ai thêm lại backdrop-filter thì mọi thứ bình thường.
   ───────────────────────────────────────────────────────────── */
.fi-ta-content {
    max-height: calc(100vh - 12rem);
    overflow-y: auto;
}

.fi-ta-table thead th,
.fi-ta-table thead .fi-ta-header-cell {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 20;
    background-color: #eef2f7 !important;
    box-shadow: inset 0 -1px 0 var(--admin-line), 0 2px 4px rgba(15, 23, 42, 0.06);
}

/* KHÔNG áp giới hạn chiều cao / ghim cho bảng nằm trong Widget (Dashboard),
   tránh gây khoảng trống thừa và che mất dòng trên cùng. */
.fi-wi .fi-ta-content {
    max-height: none !important;
    overflow: visible !important;
}
.fi-wi .fi-ta-group-header {
    position: static !important;
}

/* ============================================================
   MODAL XEM SẢN PHẨM (product-view)
   Tự viết CSS ở đây vì Filament không biên dịch Tailwind cho file blade
   tuỳ biến -> không thể dựa vào class Tailwind trong modal.
   ============================================================ */
.pv { display: flex; flex-direction: column; gap: 16px; }
.pv-top { display: grid; grid-template-columns: 300px 1fr; gap: 20px; }
@media (max-width: 700px) { .pv-top { grid-template-columns: 1fr; } }

.pv-imgbox { background: #f8fafc; border: 1px solid #eef1f4; border-radius: 12px; padding: 14px; display: flex; align-items: center; justify-content: center; }
.pv-img { width: 100%; max-height: 260px; object-fit: contain; border-radius: 8px; }

.pv-head { display: flex; flex-direction: column; }
.pv-cat { align-self: flex-start; font-size: 12px; font-weight: 600; color: #1d4ed8; background: #dbeafe; padding: 4px 12px; border-radius: 9999px; margin-bottom: 8px; }
.pv-name { font-size: 22px; font-weight: 800; color: var(--admin-ink); margin: 0 0 8px; }
.pv-desc { font-size: 14px; line-height: 1.6; color: #4b5563; margin: 0 0 14px; white-space: pre-line; }
.pv-price { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #fef2f2; border: 1px solid #fecaca; border-radius: 12px; padding: 12px 16px; }
.pv-price__label { font-size: 13px; font-weight: 600; color: #b91c1c; }
.pv-price__value { font-size: 24px; font-weight: 800; color: #dc2626; }

.pv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 700px) { .pv-grid { grid-template-columns: 1fr; } }

.pv-card { background: #fff; border: 1px solid var(--admin-line); border-radius: 12px; padding: 16px; }
.pv-card__title { font-size: 14px; font-weight: 700; color: #1f2937; margin-bottom: 12px; }

.pv-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pv-field { background: #f9fafb; border: 1px solid #eef1f4; border-radius: 10px; padding: 8px 10px; }
.pv-field__label { font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: #9ca3af; }
.pv-field__value { font-size: 14px; font-weight: 600; color: var(--admin-ink); word-break: break-word; }

.pv-stocks { display: flex; flex-wrap: wrap; gap: 8px; }
.pv-stock { display: inline-flex; align-items: center; gap: 6px; background: #f1f5f9; border: 1px solid var(--admin-line); border-radius: 9999px; padding: 6px 12px; font-size: 13px; color: #334155; }
.pv-stock b { color: var(--admin-ink); }
.pv-empty { font-size: 13px; color: #9ca3af; font-style: italic; }

.pv-pdf { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; background: #2563eb; color: #fff; font-weight: 600; font-size: 14px; padding: 10px 16px; border-radius: 10px; text-decoration: none; }
.pv-pdf:hover { background: #1d4ed8; }