/* ==========================================================================
   DARK MODE OVERRIDES - CASHBACK SHOPEE PLATFORM
   Bảng màu xanh đen dịu mắt, dùng màu thương hiệu động làm điểm nhấn.
   ========================================================================== */

:root {
    --dark-canvas: #080f1d;
    --dark-surface: #111c2f;
    --dark-surface-soft: #162238;
    --dark-surface-deep: #0c1526;
    --dark-border: rgba(148, 163, 184, 0.14);
    --dark-border-strong: rgba(148, 163, 184, 0.22);
    --dark-text: #dbe5f2;
    --dark-text-muted: #91a0b6;
}

/* Nền tổng thể */
html.dark {
    color-scheme: dark;
    background-color: var(--dark-canvas) !important;
}

html.dark body {
    background-color: var(--dark-canvas) !important;
    color: var(--dark-text) !important;
}

/* Phân tầng bề mặt: header/card sáng hơn canvas một cấp, footer chìm hơn. */
html.dark header {
    background-color: var(--dark-surface) !important;
    border-color: var(--dark-border) !important;
}

html.dark footer {
    background-color: #070d18 !important;
}

html.dark .bg-white,
html.dark .bg-white\/80 {
    background-color: var(--dark-surface) !important;
}

html.dark .bg-gray-50,
html.dark .bg-gray-100,
html.dark .bg-gray-50\/30,
html.dark .bg-gray-50\/50 {
    background-color: var(--dark-surface-deep) !important;
}

html.dark .bg-slate-50 {
    background-color: var(--dark-canvas) !important;
}

/* Typography có độ tương phản vừa đủ, tránh trắng tuyệt đối trên nền tối. */
html.dark .text-gray-900,
html.dark .text-gray-800,
html.dark .text-slate-900 {
    color: #edf3fb !important;
}

html.dark .text-gray-700,
html.dark .text-gray-600,
html.dark .text-slate-700 {
    color: #c2cede !important;
}

html.dark .text-gray-500,
html.dark .text-gray-400 {
    color: var(--dark-text-muted) !important;
}

/* Viền bán trong suốt giúp card tách lớp mà không tạo khung sáng gắt. */
html.dark .border-gray-100,
html.dark .border-gray-200,
html.dark .border-gray-300\/50 {
    border-color: var(--dark-border) !important;
}

html.dark .border-white {
    border-color: var(--dark-border-strong) !important;
}

/* Form elements */
html.dark input,
html.dark select,
html.dark textarea {
    background-color: var(--dark-surface-deep) !important;
    border-color: var(--dark-border-strong) !important;
    color: #edf3fb !important;
}

html.dark input::placeholder,
html.dark select::placeholder,
html.dark textarea::placeholder {
    color: #64748b !important;
}

/* Bóng tối ngắn và mềm, không tạo quầng tím/đen quanh card. */
html.dark .shadow-sm,
html.dark .shadow-md,
html.dark .shadow-lg,
html.dark .shadow-xl,
html.dark .shadow-2xl {
    box-shadow: 0 10px 28px -18px rgba(0, 0, 0, 0.72), 0 2px 8px -4px rgba(0, 0, 0, 0.38) !important;
}

/* Màu thương hiệu luôn lấy từ cấu hình giao diện, không cố định màu cam. */
html.dark .bg-shopee\/5 {
    background-color: rgba(238, 77, 45, 0.07) !important;
    background-color: color-mix(in srgb, var(--theme-color, #ee4d2d) 7%, transparent) !important;
}

html.dark .bg-shopee\/10 {
    background-color: rgba(238, 77, 45, 0.12) !important;
    background-color: color-mix(in srgb, var(--theme-color, #ee4d2d) 12%, transparent) !important;
}

html.dark .text-shopee {
    color: #ff8a61 !important;
    color: color-mix(in srgb, var(--theme-color, #ee4d2d) 72%, white 28%) !important;
}

/* Màu trạng thái được giảm bão hòa để dễ đọc lâu. */
html.dark .bg-emerald-50 {
    background-color: rgba(16, 185, 129, 0.08) !important;
}

html.dark .text-emerald-700 {
    color: #5dd6ad !important;
}

html.dark .bg-red-50 {
    background-color: rgba(239, 68, 68, 0.08) !important;
}

html.dark .text-red-600,
html.dark .text-red-700 {
    color: #fb8b8b !important;
}

html.dark .bg-blue-50 {
    background-color: rgba(59, 130, 246, 0.08) !important;
}

html.dark .text-blue-600,
html.dark .text-blue-700 {
    color: #7cb5ff !important;
}

html.dark .bg-orange-50 {
    background-color: rgba(249, 115, 22, 0.08) !important;
}

html.dark .border-orange-100 {
    border-color: rgba(251, 146, 60, 0.16) !important;
}

/* Menu mobile */
html.dark header div[x-show="mobileMenuOpen"] {
    background-color: var(--dark-surface) !important;
}

/* Gradient nền thương hiệu trên các jumbotron. */
html.dark .from-shopee-bg {
    --tw-gradient-from: rgba(238, 77, 45, 0.06) !important;
    --tw-gradient-from: color-mix(in srgb, var(--theme-color, #ee4d2d) 6%, transparent) !important;
    --tw-gradient-to: transparent !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

/* Hover trong dark mode chỉ nâng bề mặt một cấp. */
html.dark .hover\:bg-gray-50:hover,
html.dark .hover\:bg-gray-50\/80:hover,
html.dark .hover\:bg-gray-100:hover {
    background-color: var(--dark-surface-soft) !important;
}

html.dark .hover\:bg-red-50:hover {
    background-color: rgba(239, 68, 68, 0.12) !important;
}

/* Trang lịch sử hoàn tiền: palette riêng để cân bằng điểm nhấn thương hiệu. */
@media (max-width: 1023px) {
    html.dark .cashback-page {
        background-color: var(--dark-canvas);
    }
}

html.dark .cashback-hero {
    background-image: linear-gradient(145deg, #19263c 0%, #121d30 58%, #0d1728 100%) !important;
    border: 1px solid color-mix(in srgb, var(--theme-color, #ee4d2d) 22%, var(--dark-border));
    box-shadow: 0 20px 46px -30px color-mix(in srgb, var(--theme-color, #ee4d2d) 45%, transparent), 0 14px 34px -24px rgba(0, 0, 0, 0.9) !important;
}

html.dark .cashback-hero-icon {
    background-color: rgba(238, 77, 45, 0.12) !important;
    background-color: color-mix(in srgb, var(--theme-color, #ee4d2d) 14%, transparent) !important;
    border-color: color-mix(in srgb, var(--theme-color, #ee4d2d) 26%, transparent) !important;
    color: color-mix(in srgb, var(--theme-color, #ee4d2d) 68%, white 32%) !important;
}

html.dark .cashback-primary-action {
    background-color: var(--theme-color, #ee4d2d) !important;
    color: #fff !important;
    border-color: transparent !important;
    box-shadow: 0 10px 24px -14px color-mix(in srgb, var(--theme-color, #ee4d2d) 68%, transparent) !important;
}

html.dark .cashback-panel,
html.dark .cashback-modal {
    background-color: rgba(17, 28, 47, 0.96) !important;
    border-color: var(--dark-border) !important;
    box-shadow: 0 16px 36px -28px rgba(0, 0, 0, 0.9) !important;
}

html.dark .cashback-info {
    background-color: rgba(59, 130, 246, 0.065) !important;
    border-color: rgba(96, 165, 250, 0.14) !important;
}

html.dark .cashback-order-card {
    background-color: var(--dark-surface) !important;
    border-color: var(--dark-border) !important;
    box-shadow: 0 12px 30px -24px rgba(0, 0, 0, 0.95) !important;
}

html.dark .cashback-order-card:active {
    background-color: var(--dark-surface-soft) !important;
}

/* Table overrides (Admin Panel) */
html.dark .admin-page table {
    border-color: rgba(148, 163, 184, 0.12) !important;
}

html.dark .admin-page th {
    background-color: var(--dark-surface-deep) !important;
    color: #e2e8f0 !important;
    border-color: var(--dark-border) !important;
}

html.dark .admin-page td {
    background-color: var(--dark-surface) !important;
    color: #cbd5e1 !important;
    border-color: var(--dark-border) !important;
}

html.dark .admin-page tr:hover td {
    background-color: var(--dark-surface-soft) !important;
}

html.dark .admin-page table,
html.dark .admin-page tr,
html.dark .admin-page th,
html.dark .admin-page td,
html.dark .admin-page .divide-y > * + *,
html.dark .admin-page .border-gray-200,
html.dark .admin-page .border-gray-100 {
    border-color: var(--dark-border) !important;
}

/* Utilities */
.scrollbar-none::-webkit-scrollbar {
    display: none;
}

.scrollbar-none {
    -ms-overflow-style: none;
    scrollbar-width: none;
}