/* ===== TOKEN DÙNG CHUNG CHO KHU QUẢN TRỊ =====
   File này CHỈ khai biến, không có class nào. Nạp đầu tiên trong $publicCss
   (xem AdminBaseController) để mọi file admin phía sau đều bám vào được.

   BẢN NÀY DÙNG CHUNG VỚI thongke. Hai site giữ khung riêng (shopsieuthi có menu
   trái chiếm chỗ, thongke có menu trượt đè + thanh menu ngang) nhưng màu, bo góc,
   đổ bóng, cỡ chữ thì lấy chung ở đây. Sửa file này là phải chép sang
   /Applications/ServBay/www/thongke/public/css/admin/tokens.css — chỉ khác đúng
   giá trị --brand-* (thongke xanh lá #82b440, shopsieuthi hồng #ed697d).

   Bốn biến --brand / --brand-hover / --brand-text / --brand-soft / --brand-ink
   ở đây chỉ là mức dự phòng. Giá trị thật do PHP tính từ styles.admin_header_color
   trong DB rồi đổ ra thẻ <style> ngay sau file này trong layout, nên thẻ đó thắng.
   Đừng đặt màu thương hiệu bằng số cứng ở bất kỳ đâu khác. */

:root {
    /* ----- Nền và chữ ----- */
    --bg: #eff2f7;          /* nền trang */
    --surface: #ffffff;     /* mặt thẻ, thanh trên, menu trái */
    --surface-2: #f5f8fc;   /* dòng bảng khi rê chuột */
    --surface-3: #fbfcfe;   /* dải phân khối nhạt nhất, gần như trắng */
    --field: #eef2f8;       /* ô nhập, nút chìm, nhãn trung tính */
    --ink: #101828;         /* chữ chính */
    --ink-2: #425067;       /* chữ phụ, mục menu lúc thường */
    --muted: #5d6b82;       /* chữ mờ, chú thích */
    --line: #d8dfea;        /* đường kẻ rõ */
    --line-soft: #e6ebf3;   /* đường kẻ nhạt, ngăn dòng bảng */

    /* ----- Thương hiệu (PHP ghi đè, xem ghi chú đầu file) -----
       --brand chỉ làm NỀN. Làm chữ thì dùng --brand-text — màu nền nút đủ đậm
       vẫn thường trượt AA khi đặt lên nền trắng. */
    --brand: #1f76e8;
    --brand-hover: #1660c4;
    --brand-ink: #ffffff;   /* chữ ĐẶT TRÊN nền --brand */
    --brand-soft: #e3eefc;  /* nền nhạt: mục menu đang mở, nhãn */
    --brand-text: #1559b0;  /* chữ màu thương hiệu trên nền sáng */

    /* ----- Trạng thái ----- */
    --good: #17754e;      --good-soft: #e1f3e9;
    --warn: #8f6511;      --warn-soft: #fbf0d9;
    --crit: #a84632;      --crit-soft: #fbe7e4;
    --info: #1559b0;      --info-soft: #e3eefc;

    /* ----- Màu NỀN NÚT -----
       Tách khỏi bộ --good/--crit/--info ở trên: bộ kia dùng làm CHỮ trên nền
       nhạt nên buộc phải tối, dùng làm nền nút thì xỉn. Bộ này là mức sáng nhất
       mà chữ trắng còn đạt 4.5:1 (đo: lá 4.67, đỏ 4.85, dương 4.73, cam 4.57).
       Đổi số nào thì đo lại số đó.

       Cam trước 2026-09-14 là #f59e0b với chữ --ink: cam rực thì chữ trắng chỉ
       đạt 2.15 nên phải đảo thành nền sáng + chữ đậm. Nhưng nó thành nút DUY
       NHẤT trong bộ có chữ đen, đứng cạnh nút lá/đỏ/xám chữ trắng là lạc hẳn
       ra. Nay hạ cam xuống #c05621 để chữ trắng đạt 4.57, đồng bộ với cả bộ.
       Hai chỗ (shop/list, history/list của thongke) vốn đã tự ép .color-white
       lên nền cũ — tức đang ở mức 2.15 — nay cũng đúng theo. */
    --btn-green: #12854f;   --btn-green-dark: #0d6b3f;
    --btn-red:   #d03b22;   --btn-red-dark:   #ad301b;
    --btn-blue:  #1a72d8;   --btn-blue-dark:  #145cb0;
    --btn-orange:#c05621;   --btn-orange-dark:#9c4419;

    /* ----- Màu ô chức năng -----
       Tám cặp nền/chữ cho icon ô thống kê ở dashboard. Cố định, KHÔNG ăn theo
       --brand: tám ô cạnh nhau mà cùng một tông thì không phân biệt được ô nào
       là ô nào.

       Đã đo từng cặp trên trình duyệt, thấp nhất 4.60:1 (t5), cao nhất 5.90 (t6)
       — tất cả đạt WCAG AA. Bản thiết kế gốc có vài cặp ở mức 4.3–4.4, đã tối
       thêm ở đây. Đổi giá trị nào thì đo lại cặp đó, đừng ước bằng mắt. */
    --t1-bg: #e3eefc; --t1-ink: #1559b0;   /* sản phẩm   */
    --t2-bg: #dcf0f5; --t2-ink: #12667e;   /* danh mục   */
    --t3-bg: #eae8fb; --t3-ink: #5347c4;   /* đơn hàng   */
    --t4-bg: #e1f3e9; --t4-ink: #17754e;   /* quà tặng   */
    --t5-bg: #fbf0d9; --t5-ink: #8f6511;   /* yêu cầu mở */
    --t6-bg: #e8ecf3; --t6-ink: #4c5a70;   /* cấu hình   */
    --t7-bg: #fbe7e4; --t7-ink: #a84632;   /* chặn, xoá  */
    --t8-bg: #fae6f0; --t8-ink: #a8447c;   /* mua kèm    */

    /* ----- Hình khối ----- */
    --radius-sm: 8px;
    /* Nút và nhãn bo nhẹ hơn khung chứa. Đổi 1 chỗ này là đổi hết. */
    --radius-control: 6px;
    --radius: 12px;
    --radius-lg: 14px;
    --radius-pill: 999px;
    /* Bóng gọn và nông. Bóng toả rộng (bán kính 24px, offset âm sâu) làm mép
       thẻ nhoè vào nền, cả trang trông như mất nét — thẻ lấy độ rõ từ đường
       viền 1px --line, bóng chỉ để nhấc thẻ lên một chút. */
    --shadow-sm: 0 1px 2px rgba(16, 24, 40, .07);
    --shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 3px 8px -4px rgba(16, 24, 40, .12);
    --shadow-pop: 0 2px 6px rgba(16, 24, 40, .10), 0 12px 24px -10px rgba(16, 24, 40, .25);

    /* ----- Khung -----
       --header-h là số CỐ ĐỊNH theo từng mốc màn hình, không phải công thức vw
       như phần còn lại của admin. Lý do: thanh trên dính (sticky) và có ít nhất
       ba thứ phải neo đúng dưới đáy nó — menu trái, --admin-sticky-top, và
       .image-list trong form.css. Đo bằng vw thì ba chỗ đó phải đo lại bằng JS
       mỗi lần đổi cỡ (thongke đang phải làm vậy). Số cố định thì CSS tự lo được. */
    --header-h: 58px;
    /* Bề ngang khung quản trị = menu trái + khoảng hở + cột nội dung.
       .admin-shell và .header-inner cùng dùng số này nên thanh trên và thân
       trang thẳng một mép. */
    --shell-gap: 24px;   /* khoảng hở giữa cột trái và cột phải */
    --shell-max: calc(var(--sidebar-w) + var(--shell-gap) + var(--content-max));
    --sidebar-w: 242px;        /* menu trái lúc mở */
    --sidebar-w-min: 68px;     /* menu trái lúc co thành dải icon */
    --content-max: 1200px;  /* bề ngang tối đa của cột nội dung */
    --content-pad: 30px;
    --admin-sticky-top: calc(var(--header-h) + 8px);

    /* ----- Chữ ----- */
    --font: "Be Vietnam Pro", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif;
    --font-num: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    /* ----- Icon dùng làm mask -----
       Khai ở đây để chỗ dùng chỉ cần `mask: var(--icon-…)`. Dùng mask chứ không
       phải background-image khi icon nằm trên nền màu thương hiệu: màu đó lấy từ
       DB nên sáng tối tuỳ site, icon phải ăn theo currentColor mới luôn đọc được. */
    --icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m15.5 15.5 4.5 4.5'/%3E%3C/svg%3E");
}

@media only screen and (max-width: 1023px) {
    :root {
        --header-h: 54px;
        --content-pad: 16px;
    }
}

/* ----- Máy tính bảng dựng đứng (768–1080px) -----

   Từ 768px menu trái là CỘT CHIẾM CHỖ (xem admin/sidebar.css), nên ở khổ này
   mỗi pixel của nó là một pixel cột nội dung mất đi. Với 262px thì ở 768px cột
   nội dung chỉ còn 435px; hạ menu xuống 190px là được 507px, hơn 16%.

   thongke không bị cắt nhãn nào ở cỡ này. Nhóm shop thì có — tên menu dài hơn,
   dài nhất là "T.khoá người dùng" cần tới 245px mới đủ, mà để 245px thì chỉ còn
   +17px cho nội dung, tức mất gần hết cái lợi. Chọn giữ 190px và để nhãn dài
   xuống dấu ba chấm (.sidebar-label đã có text-overflow: ellipsis).

   Trần 1080px chứ không phải 1023: tới cỡ đó cột nội dung vẫn còn chật, menu
   hẹp vẫn lợi hơn. KHÁC với trần của --header-h và --content-pad ngay trên
   (1023px) — hai thang đó là chuyện chiều cao thanh trên và lề trang, không
   liên quan bề ngang menu, nên cố ý để lệch nhau.

   --shell-max là calc() có --sidebar-w bên trong nên tự cập nhật theo; không
   phải sửa thêm chỗ nào. */
@media only screen and (min-width: 768px) and (max-width: 1080px) {
    :root {
        --sidebar-w: 190px;
        /* Khe giữa hai cột — chính là khoảng cách từ menu trái sang .admin-main
           (.admin-shell dùng `gap: var(--shell-gap)`, xem admin/style.css). */
        --shell-gap: 10px;
    }
}

@media only screen and (max-width: 600px) {
    :root {
        --header-h: 50px;
        --content-pad: 10px;
    }
}

/* Số liệu thẳng cột: dùng cho mọi con số đọc theo cột (tiền, số lượng, giờ). */
.num {
    font-family: var(--font-num);
    font-variant-numeric: tabular-nums;
}

/* Chỉ hiện cho trình đọc màn hình. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}