/* ============================================================================
   LỚP GIAO DIỆN CHUNG — JanFlower / Yenflorist
   ============================================================================
   ĐỌC TRƯỚC KHI SỬA

   1) File này là CSS THUẦN, nạp thẳng từ public/css, KHÔNG qua Vite.
      Máy chủ không bao giờ chạy `npm run build`, nên class Tailwind MỚI viết
      trong Blade sẽ không có tác dụng trên máy chủ. Mọi thay đổi giao diện
      phải viết ở đây (hoặc inbox.css / board.css) thì mới lên được.

   2) Nạp SAU file CSS đã build, nên ghi đè được. Sửa file thì nhớ tăng ?v=
      trong AdminPanelProvider, không thì trình duyệt vẫn dùng bản cũ.

   3) Nguyên tắc: CHỈ đổi dáng vẻ. Không đổi vị trí, không giấu đi, không thêm
      bớt chức năng nào. Nếu một thay đổi làm xê dịch bố cục thì phải cân nhắc
      riêng và ghi rõ.

   4) Mọi màu khai ở :root và khai lại cho nền tối. Đừng viết mã màu thẳng vào
      từng chỗ — sẽ lệch giữa hai nền.

   5) Chữ phải đạt tương phản 4,5:1 so với nền (chữ to hoặc đậm thì 3:1).
      Vùng bấm nên đủ 44px; chỗ nào không thể thì nới vùng chạm bằng ::after
      chứ đừng làm xê dịch bố cục.
   ========================================================================= */

/* ── 1. PHÔNG CHỮ ──────────────────────────────────────────────────────────
   Trang vẫn tải Be Vietnam Pro (phông làm riêng cho tiếng Việt, dấu cân đối,
   không bị chồng dấu) nhưng resources/css/app.css lại đặt --font-sans thành
   'Instrument Sans', nên toàn bộ chữ đang hiện bằng phông kia. Sửa app.css
   không ăn thua vì máy chủ không build lại — đặt lại ở đây. */
:root {
    --font-sans: 'Be Vietnam Pro', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif,
        'Apple Color Emoji', 'Segoe UI Emoji';
}

/* ── 2. BẢNG MÀU ─────────────────────────────────────────────────────────── */
:root {
    /* Nền và mặt phẳng */
    --jf-bg: #f5f6f8;
    --jf-surface: #ffffff;
    --jf-surface-2: #f8fafc;
    --jf-surface-3: #eef1f5;

    /* Đường viền */
    --jf-border: #e3e7ed;
    --jf-border-strong: #cbd2dc;

    /* Chữ — các mức đều đạt 4,5:1 trên nền trắng */
    --jf-text: #0f172a;        /* 16,9:1 */
    --jf-text-2: #475467;      /*  7,6:1 */
    --jf-text-3: #5b6676;      /*  5,8:1 — mức nhạt nhất được phép cho chữ nhỏ */

    /* Màu thương hiệu (giữ nguyên màu cũ #2296f3 cho mảng nền) */
    --jf-primary: #2296f3;
    --jf-primary-hover: #1183de;
    --jf-primary-soft: #e8f4fe;
    --jf-primary-ink: #0a62a8;   /* 5,4:1 — dùng cho CHỮ trên nền sáng */

    --jf-accent: #db2777;        /* hồng thương hiệu, đang dùng cho số lượng */
    --jf-accent-ink: #be185d;

    /* Màu trạng thái — hậu tố -ink là bản dùng cho chữ */
    --jf-success: #16a34a;
    /* Nền của nút CHỮ TRẮNG: #16a34a chỉ đạt 2,8:1 với chữ trắng — chưa đủ.
       #15803d đạt 4,6:1. */
    --jf-success-strong: #15803d;
    --jf-success-soft: #e7f6ed;
    --jf-success-ink: #046c42;

    --jf-info-soft: #e6f2fb;
    --jf-info-ink: #0a62a8;

    --jf-warn-soft: #fef4e6;
    --jf-warn-ink: #8a5300;

    --jf-danger: #dc2626;
    --jf-danger-soft: #fdecec;
    --jf-danger-ink: #b42318;

    --jf-money-ink: #a8490a;     /* 5,0:1 — số tiền */

    /* Bo góc */
    --jf-r-sm: 6px;
    --jf-r: 10px;
    --jf-r-lg: 14px;
    --jf-r-pill: 999px;

    /* Đổ bóng — nhẹ, hai lớp, không để thành vệt xám đục */
    --jf-shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);
    --jf-shadow: 0 1px 3px rgba(16, 24, 40, .08), 0 1px 2px rgba(16, 24, 40, .04);
    --jf-shadow-lg: 0 8px 24px rgba(16, 24, 40, .10), 0 2px 6px rgba(16, 24, 40, .05);

    /* Vòng sáng khi chọn bằng bàn phím */
    --jf-ring: 0 0 0 3px rgba(34, 150, 243, .35);

    /* Thời lượng chuyển động */
    --jf-fast: 120ms;
    --jf-base: 180ms;
}

.dark {
    --jf-bg: #0e1116;
    --jf-surface: #161a21;
    --jf-surface-2: #1c212a;
    --jf-surface-3: #232935;

    --jf-border: #2a313d;
    --jf-border-strong: #3a434f;

    --jf-text: #e8ebf0;
    --jf-text-2: #aab3c0;
    --jf-text-3: #929cab;

    --jf-primary: #3aa5f7;
    --jf-primary-hover: #58b4f9;
    --jf-primary-soft: #11293c;
    --jf-primary-ink: #7cc5fb;

    --jf-accent: #f472b6;
    --jf-accent-ink: #f9a8d4;

    --jf-success: #22c55e;
    --jf-success-strong: #15803d;
    --jf-success-soft: #10291c;
    --jf-success-ink: #6ee7a8;

    --jf-info-soft: #11293c;
    --jf-info-ink: #7cc5fb;

    --jf-warn-soft: #2e2310;
    --jf-warn-ink: #fcc96b;

    --jf-danger: #ef4444;
    --jf-danger-soft: #2c1517;
    --jf-danger-ink: #fca5a5;

    --jf-money-ink: #fdba74;

    --jf-shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
    --jf-shadow: 0 1px 3px rgba(0, 0, 0, .45), 0 1px 2px rgba(0, 0, 0, .3);
    --jf-shadow-lg: 0 10px 28px rgba(0, 0, 0, .55), 0 2px 8px rgba(0, 0, 0, .4);

    --jf-ring: 0 0 0 3px rgba(58, 165, 247, .45);
}

/* ── 3. CHỮ ────────────────────────────────────────────────────────────────
   16px là cỡ chữ gốc để trình duyệt không tự phóng to ô nhập trên iPhone.
   Giãn dòng 1,5 cho chữ thường — tiếng Việt có dấu nên cần thoáng hơn. */
.fi-body {
    background-color: var(--jf-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

.fi-body,
.fi-body input,
.fi-body select,
.fi-body textarea,
.fi-body button {
    font-family: var(--font-sans);
}

/* Số tiền, mã đơn, giờ: chữ số đều bề ngang để cột số thẳng hàng. */
.fi-body .jf-num,
.fi-body .font-mono,
.fi-body [class*="tabular"] {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
}

/* iOS phóng to trang khi ô nhập nhỏ hơn 16px — ép tối thiểu 16px trên điện thoại. */
@media (max-width: 767px) {
    .fi-body input:not([type='checkbox']):not([type='radio']),
    .fi-body select,
    .fi-body textarea {
        font-size: 16px;
    }
}

/* ── 4. VÙNG BẤM ───────────────────────────────────────────────────────────
   Các nút biểu tượng của Filament đang 32–36px. Nới ra 44px — đây là phần
   khung của trang nên không làm xê dịch nội dung bên dưới. */
.fi-body .fi-icon-btn,
.fi-body .fi-topbar-open-sidebar-btn,
.fi-body .fi-topbar-close-sidebar-btn,
.fi-body .fi-sidebar-group-collapse-btn,
.fi-body .fi-theme-switcher-btn {
    min-width: 44px;
    min-height: 44px;
}

.fi-body .fi-user-menu-trigger {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.fi-body .fi-sidebar-item-btn {
    min-height: 44px;
    border-radius: var(--jf-r);
}

/* Ô tích / nút tròn nhỏ: giữ nguyên kích thước nhìn thấy, chỉ nới vùng chạm.
   Dùng ::after nên không đẩy bố cục. */
.fi-body input[type='checkbox'],
.fi-body input[type='radio'] {
    position: relative;
    width: 18px;
    height: 18px;
}

.fi-body input[type='checkbox']::after,
.fi-body input[type='radio']::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
}

/* ── 5. CHỌN BẰNG BÀN PHÍM ─────────────────────────────────────────────────
   Thấy rõ đang ở ô nào — cần cho người dùng bàn phím và cho cả việc gỡ lỗi. */
.fi-body :focus-visible {
    outline: none;
    box-shadow: var(--jf-ring);
    border-radius: var(--jf-r-sm);
}

/* ── 6. KHUNG TRANG ────────────────────────────────────────────────────────
   Thanh trên và menu trái: viền mảnh thay cho bóng đổ nặng. */
.fi-body .fi-topbar > nav,
.fi-body .fi-topbar {
    background-color: var(--jf-surface);
    border-bottom: 1px solid var(--jf-border);
    box-shadow: none;
}

.fi-body .fi-sidebar {
    background-color: var(--jf-surface);
    border-right: 1px solid var(--jf-border);
}

.fi-body .fi-sidebar-group-label {
    color: var(--jf-text-3);
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* Mục đang mở: dải màu bên trái thay vì chỉ đổi nền — dễ nhận ra hơn,
   và không chỉ dựa vào màu (còn có dải). */
.fi-body .fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    position: relative;
    background-color: var(--jf-primary-soft);
}

.fi-body .fi-sidebar-item.fi-active > .fi-sidebar-item-btn::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background-color: var(--jf-primary);
}

.fi-body .fi-sidebar-item.fi-active .fi-sidebar-item-label {
    color: var(--jf-primary-ink);
    font-weight: 600;
}

/* ── 7. KHỐI NỘI DUNG, BẢNG, Ô NHẬP ────────────────────────────────────── */
.fi-body .fi-section,
.fi-body .fi-ta-ctn,
.fi-body .fi-wi-stats-overview-stat {
    border-radius: var(--jf-r-lg);
    border: 1px solid var(--jf-border);
    box-shadow: var(--jf-shadow-sm);
}

.fi-body .fi-ta-header-cell,
.fi-body .fi-ta-header-cell-label {
    color: var(--jf-text-2);
    font-weight: 600;
}

/* Dòng bảng: nền xen kẽ rất nhẹ để mắt dò ngang không bị lạc. */
.fi-body .fi-ta-row:hover {
    background-color: var(--jf-surface-2);
}

.fi-body .fi-input-wrp {
    border-radius: var(--jf-r);
}

/* ── 8. NÚT ────────────────────────────────────────────────────────────── */
.fi-body .fi-btn {
    border-radius: var(--jf-r);
    font-weight: 600;
    min-height: 40px;
    transition: background-color var(--jf-fast) ease, box-shadow var(--jf-fast) ease;
}

.fi-body .fi-btn.fi-size-lg {
    min-height: 48px;
}

/* ── 9. CHUYỂN ĐỘNG ────────────────────────────────────────────────────────
   Người bật "giảm chuyển động" trong cài đặt máy thì tắt hết hiệu ứng. */
@media (prefers-reduced-motion: reduce) {
    .fi-body *,
    .fi-body *::before,
    .fi-body *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ── 10. VÙNG AN TOÀN TRÊN ĐIỆN THOẠI ──────────────────────────────────────
   Tránh nội dung chui xuống dưới thanh vuốt của iPhone. */
@supports (padding: max(0px)) {
    .fi-body .fi-main {
        padding-bottom: max(1rem, env(safe-area-inset-bottom));
    }
}

/* ============================================================================
   11. CÁC MẢNH GIAO DIỆN DÙNG CHUNG (lớp jf-*)
   ============================================================================
   Đặt tên theo việc nó làm, không theo màu. Đổi màu thì sửa biến ở mục 2,
   đừng viết mã màu vào đây.
   ========================================================================= */

/* ── Biểu tượng ────────────────────────────────────────────────────────────
   Ăn theo cỡ chữ của chỗ chứa nó, nên không bao giờ lệch dòng. */
.jf-i {
    width: 1.15em;
    height: 1.15em;
    flex: 0 0 auto;
    vertical-align: -0.18em;
}

.jf-i-lg { width: 1.5em; height: 1.5em; }

/* ── Ảnh sản phẩm trên thẻ đơn ─────────────────────────────────────────── */
.jf-thumb {
    border-radius: var(--jf-r);
    border: 1px solid var(--jf-border);
    background-color: var(--jf-surface-2);
}

.jf-thumb--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--jf-accent);
    background-image: linear-gradient(140deg, var(--jf-surface-2), var(--jf-surface-3));
}

.jf-thumb--empty .jf-i {
    width: 44%;
    height: 44%;
    opacity: .55;
}

/* ── Chữ trên thẻ ──────────────────────────────────────────────────────── */
/* Tên sản phẩm.
   Ở khổ 375px, cột giữa chỉ còn ~130px sau khi trừ ảnh và khối trạng thái bên
   phải, nên tên dài bị bẻ thành 3–4 dòng, thẻ cao vống lên và danh sách khó
   đọc. Giới hạn 2 dòng: tên đầy đủ vẫn còn nguyên trong thuộc tính title và
   trong trang sửa đơn khi bấm vào thẻ. */
.jf-title {
    color: var(--jf-text);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    word-break: break-word;
}

/* Khối trạng thái bên phải.
   Giới hạn bề ngang để nhường chỗ cho tên, và cho nhãn kênh (Trực tiếp /
   Facebook…) xuống dòng riêng — trước đây nó nằm cùng dòng với huy hiệu nên
   ở khổ 375px bị cắt cụt. Máy tính vốn đã xếp xuống dòng, giờ hai bên giống nhau. */
.jf-title + .shrink-0 {
    max-width: 42%;
    white-space: normal;
}

.jf-title + .shrink-0 > .jf-meta {
    display: block;
    margin-left: 0;
    margin-top: .125rem;
    line-height: 1.3;
}

.jf-meta { color: var(--jf-text-3); }

.jf-line { color: var(--jf-text-3); }

.jf-time { font-weight: 600; color: var(--jf-text-2); }

.jf-code {
    font-weight: 600;
    color: var(--jf-primary-ink);
    font-variant-numeric: tabular-nums;
}

.jf-area { color: var(--jf-text-3); }

.jf-sep { color: var(--jf-border-strong); margin: 0 .25rem; }

/* Tên người: biểu tượng + chữ, canh giữa theo chiều dọc. */
.jf-who {
    display: flex;
    align-items: center;
    gap: .3rem;
    color: var(--jf-text-2);
}

.jf-who .jf-i { color: var(--jf-text-3); }

.jf-who > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Huy hiệu trạng thái ───────────────────────────────────────────────────
   Màu do PHP quyết định (simpleStatus) — ở đây chỉ chỉnh cỡ và khoảng đệm.  */
.jf-badge {
    display: inline-block;
    font-size: .75rem;
    line-height: 1.25;
    padding: .15rem .5rem;
    letter-spacing: .01em;
}

/* ── Chip nhỏ (hình thức thanh toán…) ──────────────────────────────────── */
.jf-chip {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    border-radius: var(--jf-r-pill);
    padding: .15rem .5rem;
    font-size: .75rem;
    font-weight: 600;
    background-color: var(--jf-surface-3);
    color: var(--jf-text-2);
}

.jf-chip--pay {
    background-color: var(--jf-primary-soft);
    color: var(--jf-primary-ink);
}

/* ── Nút gọi điện ──────────────────────────────────────────────────────────
   Đây là thao tác hay dùng nhất trên thẻ đơn. Trước đây chỉ cao 21px nên rất
   dễ bấm nhầm sang thẻ bên dưới. Nâng lên 36px — chưa đạt 44px khuyến nghị
   nhưng hai nút này xếp chồng nhau, nâng hẳn 44px sẽ làm danh sách dài thêm
   nhiều. Muốn cao hơn nữa thì sửa đúng một dòng --jf-tel-h dưới đây. */
:root { --jf-tel-h: 36px; }

.jf-tel {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    min-height: var(--jf-tel-h);
    padding: .25rem .625rem;
    border-radius: var(--jf-r-pill);
    border: 1px solid transparent;
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: left;
    transition: background-color var(--jf-fast) ease, border-color var(--jf-fast) ease;
}

.jf-tel b { font-weight: 700; }

.jf-tel--lg { --jf-tel-h: 44px; font-size: .8125rem; padding: .375rem .875rem; }

.jf-tel--buyer {
    background-color: var(--jf-success-soft);
    color: var(--jf-success-ink);
    border-color: color-mix(in srgb, var(--jf-success-ink) 18%, transparent);
}

.jf-tel--buyer:hover { background-color: color-mix(in srgb, var(--jf-success-ink) 12%, var(--jf-success-soft)); }

.jf-tel--receiver {
    background-color: var(--jf-info-soft);
    color: var(--jf-info-ink);
    border-color: color-mix(in srgb, var(--jf-info-ink) 18%, transparent);
}

.jf-tel--receiver:hover { background-color: color-mix(in srgb, var(--jf-info-ink) 12%, var(--jf-info-soft)); }

/* ── Tiền ──────────────────────────────────────────────────────────────── */
.jf-money {
    font-weight: 700;
    font-size: .9375rem;
    color: var(--jf-money-ink);
}

.jf-due-label { font-size: .6875rem; color: var(--jf-text-3); }

.jf-due { font-size: .75rem; font-weight: 700; color: var(--jf-danger-ink); }

/* ── Liên kết dạng chữ (nội dung thiệp, chép) ─────────────────────────── */
.jf-link {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    min-height: 36px;
    padding: .25rem .125rem;
    font-size: .75rem;
    font-weight: 600;
    color: var(--jf-text-2);
}

.jf-link:hover { color: var(--jf-text); }

.jf-link--card { color: var(--jf-accent-ink); }

.jf-link--card:hover { color: var(--jf-accent); }

/* Mũi tên lên/xuống vẽ bằng CSS — thay cho ký tự ▲▼ (mỗi máy vẽ một kiểu). */
.jf-caret {
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    transition: transform var(--jf-base) ease;
}

.jf-caret--open { transform: rotate(180deg); }

.jf-card-msg {
    border-radius: var(--jf-r);
    padding: .5rem .625rem;
    font-size: .75rem;
    line-height: 1.55;
    color: var(--jf-text-2);
    background-color: var(--jf-surface-2);
    border: 1px solid var(--jf-border);
}

/* ── Nút hành động trên thẻ ────────────────────────────────────────────── */
.jf-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .375rem;
    min-height: 40px;
    padding: .375rem .875rem;
    border-radius: var(--jf-r);
    font-size: .8125rem;
    font-weight: 700;
    color: #fff;
    box-shadow: var(--jf-shadow-sm);
    transition: background-color var(--jf-fast) ease, transform var(--jf-fast) ease;
}

.jf-action > span { display: inline-flex; align-items: center; gap: .375rem; }

.jf-action--block { min-height: 44px; width: 100%; }

.jf-action--done { background-color: var(--jf-success-strong); }

.jf-action--done:hover { background-color: color-mix(in srgb, #000 12%, var(--jf-success-strong)); }

.jf-action:active { transform: scale(.985); }

.jf-action[disabled] { opacity: .65; }

/* ── Dải "đã giao" cuối thẻ ────────────────────────────────────────────── */
.jf-delivered-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .375rem;
    border-top: 1px solid var(--jf-border);
    background-color: var(--jf-success-soft);
    color: var(--jf-success-ink);
    padding: .625rem 1rem;
    font-size: .75rem;
    font-weight: 600;
}

/* ── 12. CHUÔNG THÔNG BÁO ─────────────────────────────────────────────────
   Nút ở thanh trên, markup riêng (livewire/admin-notifications) nên không
   nhận được rule .fi-icon-btn ở mục 4. */
.fi-body [data-jf-bell],
.fi-body .fi-topbar-end button[title='Thông báo'],
.fi-body .fi-topbar-end button[aria-label='Thông báo'] {
    min-width: 44px;
    min-height: 44px;
}

/* ── 13. TRANG XƯỞNG ──────────────────────────────────────────────────────
   Ô biểu tượng trạng thái của mỗi đơn (thay cho emoji ✅ ⚙️ 🔥 🌸). */
.jf-state {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--jf-r);
    flex: 0 0 auto;
}

.jf-state .jf-i { width: 55%; height: 55%; }

.jf-state--done { background-color: var(--jf-success-soft); color: var(--jf-success-ink); }
.jf-state--doing { background-color: var(--jf-info-soft); color: var(--jf-info-ink); }
.jf-state--urgent { background-color: var(--jf-warn-soft); color: var(--jf-warn-ink); }
.jf-state--new {
    background-color: color-mix(in srgb, var(--jf-accent) 10%, var(--jf-surface));
    color: var(--jf-accent-ink);
}

/* Biểu tượng lớn ở màn hình "không có đơn nào" */
.jf-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: var(--jf-r-pill);
    background-color: var(--jf-surface-3);
    color: var(--jf-text-3);
}

.jf-empty-icon .jf-i { width: 32px; height: 32px; }