@import "tailwindcss";
@custom-variant dark (&:where(.dark, .dark *));

@theme {
    --font-sans: "Inter", system-ui, sans-serif;

    --color-text-red: #ea5455;
    --color-text-green: #28c76f;

    --color-button-red: #fa4444;
    --color-button-dark-red: #950b0b;
    --color-button-light-red: #f89595;
    --color-button-deep-blue: #0015ff;
    --color-button-light-blue: #0c8ce9;
    --color-button-green: #26b265;
    --color-button-light-green: #7bf1b0;
    --color-button-purple: #5656a7;
    --color-button-light-purple: #9191de;
    --color-button-yellow: #ffc300;

    --color-body: #efefef;

    --fill-black: black;
}

@utility btn {
    @apply inline-flex items-center justify-center rounded-lg py-2 text-sm font-bold;
}

@utility btn-square {
    @apply py-1.5;
}

@utility btn-primary {
    @apply bg-linear-to-r from-[#155DFC] to-[#9810FA] py-3 text-base text-white;
}

@utility outline-icon {
    @apply stroke-black group-hover:stroke-white;
}

@utility shadow-tab-button {
    box-shadow:
        0 10px 15px -3px #bedbff,
        0 4px 6px -4px #bedbff;
}

@utility shadow-tab-hover {
    box-shadow:
        0 4px 6px -1px rgba(0, 0, 0, 0.1),
        0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

input[type="password"]::-ms-reveal {
    display: none;
}

input[type="password"]::-ms-clear {
    display: none;
}

/* ==========================================================================
   Responsive Table Pseudo-Elements Localization Overrides (Vietnamese)
   ========================================================================== */
html[lang="vi"] .before\:content-\[\'ACTIONS\:\'\]::before {
    --tw-content: "THAO TÁC:";
    content: "THAO TÁC:";
}
html[lang="vi"] .before\:content-\[\'ADDRESS\:\'\]::before {
    --tw-content: "ĐỊA CHỈ:";
    content: "ĐỊA CHỈ:";
}
html[lang="vi"] .before\:content-\[\'AMOUNT\:\'\]::before {
    --tw-content: "SỐ TIỀN:";
    content: "SỐ TIỀN:";
}
html[lang="vi"] .before\:content-\[\'CATEGORY\:\'\]::before {
    --tw-content: "DANH MỤC:";
    content: "DANH MỤC:";
}
html[lang="vi"] .before\:content-\[\'CUSTOMER\:\'\]::before {
    --tw-content: "KHÁCH HÀNG:";
    content: "KHÁCH HÀNG:";
}
html[lang="vi"] .before\:content-\[\'DATE\:\'\]::before {
    --tw-content: "NGÀY:";
    content: "NGÀY:";
}
html[lang="vi"] .before\:content-\[\'EMAIL\:\'\]::before {
    --tw-content: "EMAIL:";
    content: "EMAIL:";
}
html[lang="vi"] .before\:content-\[\'FULL_NAME\:\'\]::before {
    --tw-content: "HỌ VÀ TÊN:";
    content: "HỌ VÀ TÊN:";
}
html[lang="vi"] .before\:content-\[\'GENDER\:\'\]::before {
    --tw-content: "GIỚI TÍNH:";
    content: "GIỚI TÍNH:";
}
html[lang="vi"] .before\:content-\[\'ITEM_CODE\:\'\]::before {
    --tw-content: "MÃ MÓN HÀNG:";
    content: "MÃ MÓN HÀNG:";
}
html[lang="vi"] .before\:content-\[\'ITEM_NAME\:\'\]::before {
    --tw-content: "TÊN SẢN PHẨM:";
    content: "TÊN SẢN PHẨM:";
}
html[lang="vi"] .before\:content-\[\'ORDER_ID\:\'\]::before {
    --tw-content: "MÃ ĐƠN HÀNG:";
    content: "MÃ ĐƠN HÀNG:";
}
html[lang="vi"] .before\:content-\[\'PHONE\:\'\]::before {
    --tw-content: "SỐ ĐIỆN THOẠI:";
    content: "SỐ ĐIỆN THOẠI:";
}
html[lang="vi"] .before\:content-\[\'PRICE\:\'\]::before {
    --tw-content: "GIÁ:";
    content: "GIÁ:";
}
html[lang="vi"] .before\:content-\[\'QUANTITY\:\'\]::before {
    --tw-content: "SỐ LƯỢNG:";
    content: "SỐ LƯỢNG:";
}
html[lang="vi"] .before\:content-\[\'SKU\:\'\]::before {
    --tw-content: "MÃ SKU:";
    content: "MÃ SKU:";
}
html[lang="vi"] .before\:content-\[\'STAFF_CODE\:\'\]::before {
    --tw-content: "MÃ NHÂN VIÊN:";
    content: "MÃ NHÂN VIÊN:";
}
html[lang="vi"] .before\:content-\[\'STATUS\:\'\]::before {
    --tw-content: "TRẠNG THÁI:";
    content: "TRẠNG THÁI:";
}
html[lang="vi"] .before\:content-\[\'TOTAL\:\'\]::before {
    --tw-content: "TỔNG TIỀN:";
    content: "TỔNG TIỀN:";
}
html[lang="vi"] .before\:content-\[\'UNIT_PRICE\:\'\]::before {
    --tw-content: "ĐƠN GIÁ:";
    content: "ĐƠN GIÁ:";
}

* {
    scrollbar-width: thin;
    scrollbar-color: rgba(156, 163, 175, 0.5) transparent;
}

.dark * {
    scrollbar-color: rgba(71, 85, 105, 0.6) transparent;
}

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(156, 163, 175, 0.5);
    border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(107, 114, 128, 0.75);
}

.dark ::-webkit-scrollbar-thumb {
    background: rgba(71, 85, 105, 0.6);
}

.dark ::-webkit-scrollbar-thumb:hover {
    background: rgba(100, 116, 139, 0.85);
}

#table::-webkit-scrollbar-track {
    margin-block: 12px;
}