/* KeyShop - Tailwind CSS Custom Styles */

/* ── Design tokens (light) ─────────────────────────────────────────── */
:root {
    /* Meta Design System */
    --meta-blue:         #0064E0;
    --meta-blue-hover:   #0143B5;
    --meta-blue-pressed: #004BB9;
    --meta-blue-light:   #47A5FA;
    --dark-charcoal:     #1C2B33;
    --slate-gray:        #5D6C7B;
    --near-black:        #1C1E21;
    --soft-gray:         #F1F4F7;
    --divider-gray:      #DEE3E9;
    --card-radius:       20px;
    --pill-radius:       100px;

    /* Legacy tokens (kept for admin panel compat) */
    --primary:       #0064E0;
    --primary-dark:  #0143B5;
    --secondary:     #5D6C7B;
    --success:       #22c55e;
    --danger:        #ef4444;
    --warning:       #f59e0b;
    --info:          #06b6d4;

    /* Surface */
    --bg-base:       #ffffff;
    --bg-surface:    #ffffff;
    --bg-muted:      #F1F4F7;
    --bg-hover:      #f0f2f5;

    /* Border */
    --border:        #DEE3E9;
    --border-muted:  #eef0f3;

    /* Text */
    --text-primary:  #1C2B33;
    --text-secondary:#465A69;
    --text-muted:    #5D6C7B;
    --text-subtle:   #8595A4;

    /* Sidebar */
    --sidebar-bg-from: #1e293b;
    --sidebar-bg-to:   #0f172a;
    --sidebar-border:  rgba(255,255,255,0.08);
    --sidebar-item:    rgba(255,255,255,0.75);
    --sidebar-hover:   rgba(255,255,255,0.10);
    --sidebar-active:  rgba(59,130,246,0.28);

    /* Topbar */
    --topbar-bg:     #ffffff;
    --topbar-border: #e2e8f0;

    /* Z-index scale */
    --z-topbar:   30;
    --z-overlay:  40;
    --z-sidebar:  50;
    --z-dropdown: 100;
    --z-modal:    200;
    --z-toast:    9999;
}

/* ── Design tokens (dark) ──────────────────────────────────────────── */
html.dark {
    --bg-base:       #0f172a;
    --bg-surface:    #1e293b;
    --bg-muted:      #162032;
    --bg-hover:      #243044;

    --border:        #2d3f55;
    --border-muted:  #1e2d40;

    --text-primary:  #f1f5f9;
    --text-secondary:#cbd5e1;
    --text-muted:    #94a3b8;
    --text-subtle:   #64748b;

    --sidebar-bg-from: #0d1421;
    --sidebar-bg-to:   #060d18;
    --sidebar-border:  rgba(255,255,255,0.06);
    --sidebar-item:    rgba(255,255,255,0.75);
    --sidebar-hover:   rgba(255,255,255,0.07);
    --sidebar-active:  rgba(59,130,246,0.22);

    --topbar-bg:     #1e293b;
    --topbar-border: #2d3f55;
}

/* ── Base ───────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
    font-family: 'Montserrat', 'Helvetica', 'Arial', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: var(--bg-base);
    color: var(--text-muted);
    transition: background-color 0.2s, color 0.2s;
}

/* ── Custom scrollbar ───────────────────────────────────────────────── */
::-webkit-scrollbar               { width: 6px; height: 6px; }
::-webkit-scrollbar-track         { background: #f1f5f9; }
::-webkit-scrollbar-thumb         { background: #cbd5e1; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover   { background: #94a3b8; }

html.dark ::-webkit-scrollbar-track       { background: #1e293b; }
html.dark ::-webkit-scrollbar-thumb       { background: #334155; }
html.dark ::-webkit-scrollbar-thumb:hover { background: #475569; }

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

/* ── Toast ──────────────────────────────────────────────────────────── */
.toast-container {
    position: fixed;
    top: 1rem; right: 1rem;
    z-index: var(--z-toast);
    display: flex; flex-direction: column; gap: 0.5rem;
    max-width: 400px;
    pointer-events: none;
}
.toast {
    display: flex; align-items: center;
    padding: 0.875rem 1rem;
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
    pointer-events: auto;
    animation: toast-in 0.3s ease-out;
    min-width: 300px;
}
.toast-success { background: #dcfce7; border-left: 4px solid #22c55e; color: #166534; }
.toast-error   { background: #fee2e2; border-left: 4px solid #ef4444; color: #991b1b; }
.toast-warning { background: #fef3c7; border-left: 4px solid #f59e0b; color: #92400e; }
.toast-info    { background: #e0f2fe; border-left: 4px solid #0ea5e9; color: #075985; }

html.dark .toast-success { background: #14532d; border-left-color: #22c55e; color: #bbf7d0; }
html.dark .toast-error   { background: #7f1d1d; border-left-color: #ef4444; color: #fecaca; }
html.dark .toast-warning { background: #78350f; border-left-color: #f59e0b; color: #fde68a; }
html.dark .toast-info    { background: #0c4a6e; border-left-color: #0ea5e9; color: #bae6fd; }

.toast-icon    { flex-shrink: 0; width: 1.25rem; height: 1.25rem; margin-right: 0.75rem; }
.toast-content { flex: 1; font-size: 0.875rem; font-weight: 500; }
.toast-close   { flex-shrink: 0; margin-left: 0.75rem; padding: 0.25rem; border-radius: 0.25rem; cursor: pointer; opacity: 0.7; transition: opacity 0.2s; }
.toast-close:hover { opacity: 1; }
.toast-out { animation: toast-out 0.3s ease-in forwards; }

@keyframes toast-in  { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes toast-out { from { transform: translateX(0); opacity: 1; } to { transform: translateX(100%); opacity: 0; } }

/* ── Admin Sidebar ──────────────────────────────────────────────────── */
.admin-sidebar {
    width: 260px; min-width: 260px;
    background: linear-gradient(180deg, var(--sidebar-bg-from) 0%, var(--sidebar-bg-to) 100%);
    min-height: 100vh;
    transition: transform 0.3s cubic-bezier(0.4,0,0.2,1), background 0.2s;
    position: relative;
    flex-shrink: 0;
}
.admin-sidebar-overlay {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: var(--z-overlay);
    cursor: pointer;
    transition: opacity 0.3s ease;
}
@media (max-width: 1023px) {
    .admin-sidebar {
        position: fixed; top: 0; left: 0;
        height: 100%; height: 100dvh;
        min-height: unset;
        z-index: var(--z-sidebar);
        transform: translateX(-100%);
        overflow-y: auto;
        box-shadow: none;
    }
    .admin-sidebar.open {
        transform: translateX(0);
        box-shadow: 4px 0 24px rgba(0,0,0,0.35);
    }
    .admin-sidebar-overlay.open { display: block; }
    .admin-sidebar.open ~ .flex-1 { pointer-events: none; user-select: none; }
}
body.sidebar-open { overflow: hidden; touch-action: none; }

.sidebar-nav-item {
    display: flex; align-items: center;
    padding: 0.75rem 1rem;
    margin: 0.125rem 0.75rem;
    border-radius: 0.5rem;
    color: var(--sidebar-item);
    text-decoration: none;
    transition: all 0.2s;
    font-size: 0.875rem;
}
.sidebar-nav-item:hover  { background: var(--sidebar-hover); color: #fff; }
.sidebar-nav-item.active { background: var(--sidebar-active); color: #fff; }
.sidebar-nav-item i      { width: 1.25rem; margin-right: 0.75rem; text-align: center; }

/* ── Admin Topbar ───────────────────────────────────────────────────── */
.admin-topbar {
    background: var(--topbar-bg);
    border-bottom: 1px solid var(--topbar-border);
    padding: 0 1rem; height: 64px;
    display: flex; align-items: center; justify-content: space-between;
    position: sticky; top: 0;
    z-index: var(--z-topbar);
    transition: background 0.2s, border-color 0.2s;
}

/* ── Dropdown ───────────────────────────────────────────────────────── */
.dropdown { position: relative; }
.dropdown-menu {
    position: absolute; right: 0; top: 100%;
    margin-top: 0.5rem;
    background: var(--bg-surface);
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
    min-width: 200px;
    opacity: 0; visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s;
    z-index: var(--z-dropdown);
    border: 1px solid var(--border);
}
.dropdown-menu.open { opacity: 1; visibility: visible; transform: translateY(0); }

.dropdown-item {
    display: flex; align-items: center;
    padding: 0.625rem 1rem;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.875rem;
    transition: background 0.15s;
}
.dropdown-item:hover    { background: var(--bg-hover); }
.dropdown-item i        { width: 1.25rem; margin-right: 0.5rem; color: var(--text-muted); }
.dropdown-item.danger   { color: #ef4444; }
.dropdown-item.danger i { color: #ef4444; }
.dropdown-divider       { height: 1px; background: var(--border-muted); margin: 0.25rem 0; }

/* ── Product card ───────────────────────────────────────────────────── */
.product-card {
    background: var(--bg-surface);
    border-radius: var(--card-radius);
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.product-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(0,0,0,0.2), 0 2px 4px rgba(0,0,0,0.1);
}
html.dark .product-card { box-shadow: 0 2px 4px rgba(0,0,0,0.4); }

.product-image { height: 180px; object-fit: cover; background: var(--bg-muted); }
@media (max-width: 640px) { .product-image { height: 140px; } }

/* ── Key display ────────────────────────────────────────────────────── */
.key-display {
    font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
    background: var(--bg-muted);
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    word-break: break-all;
    color: var(--text-primary);
}
.key-item {
    display: flex; justify-content: space-between; align-items: center;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    margin-bottom: 0.5rem;
}

/* ── Form controls ──────────────────────────────────────────────────── */
.form-input {
    width: 100%;
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    font-size: 0.875rem;
    background: var(--bg-surface);
    color: var(--text-primary);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.form-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(59,130,246,0.1);
}
.form-label {
    display: block;
    margin-bottom: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
}

/* ── Buttons ────────────────────────────────────────────────────────── */
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 10px 22px;
    font-size: 0.875rem; font-weight: 400;
    letter-spacing: -0.14px;
    border-radius: var(--pill-radius);
    cursor: pointer;
    transition: background 200ms ease, transform 150ms ease;
    text-decoration: none;
    border: none;
}
.btn-primary   { background: var(--meta-blue); color: #fff; }
.btn-primary:hover  { background: var(--meta-blue-hover); transform: scale(1.05); }
.btn-primary:active { background: var(--meta-blue-pressed); transform: scale(0.97); opacity: 0.85; }
.btn-secondary {
    background: transparent;
    color: rgba(28,43,51,0.5);
    border: 2px solid rgba(10,19,23,0.12);
}
.btn-secondary:hover { background: rgba(70,90,105,0.08); }
.btn-danger    { background: #ef4444; color: #fff; border-radius: var(--pill-radius); }
.btn-danger:hover  { background: #dc2626; }
.btn-success   { background: #22c55e; color: #fff; border-radius: var(--pill-radius); }
.btn-success:hover { background: #16a34a; }
.btn-warning   { background: #f59e0b; color: #fff; border-radius: var(--pill-radius); }
.btn-warning:hover { background: #d97706; }
.btn-sm { padding: 6px 14px; font-size: 0.75rem; }
.btn-lg { padding: 14px 28px; font-size: 1rem; }

/* ── Badge ──────────────────────────────────────────────────────────── */
.badge {
    display: inline-flex; align-items: center;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem; font-weight: 500;
    border-radius: 9999px;
}
.badge-primary   { background: #dbeafe; color: #1d4ed8; }
.badge-success   { background: #dcfce7; color: #166534; }
.badge-warning   { background: #fef3c7; color: #92400e; }
.badge-danger    { background: #fee2e2; color: #991b1b; }
.badge-secondary { background: #f3f4f6; color: #4b5563; }
.badge-info      { background: #e0f2fe; color: #075985; }

html.dark .badge-primary   { background: rgba(219,234,254,0.15); color: #93c5fd; }
html.dark .badge-success   { background: rgba(220,252,231,0.15); color: #86efac; }
html.dark .badge-warning   { background: rgba(254,243,199,0.15); color: #fcd34d; }
html.dark .badge-danger    { background: rgba(254,226,226,0.15); color: #fca5a5; }
html.dark .badge-secondary { background: rgba(243,244,246,0.12); color: #94a3b8; }
html.dark .badge-info      { background: rgba(224,242,254,0.15); color: #7dd3fc; }

/* ── Card ───────────────────────────────────────────────────────────── */
.card        { background: var(--bg-surface); border-radius: var(--card-radius); box-shadow: 0 2px 4px rgba(0,0,0,0.1); border: 1px solid var(--border); }
.card-header { padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); font-weight: 600; color: var(--text-primary); }
.card-body   { padding: 1.25rem; }

/* ── Table ──────────────────────────────────────────────────────────── */
.table-container { overflow-x: auto; }
.data-table      { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.data-table th   { background: var(--bg-muted); padding: 0.75rem 1rem; text-align: left; font-weight: 600; color: var(--text-secondary); border-bottom: 1px solid var(--border); white-space: nowrap; }
.data-table td   { padding: 0.75rem 1rem; border-bottom: 1px solid var(--border-muted); color: var(--text-muted); }
.data-table tbody tr:hover { background: var(--bg-hover); }

/* ── Stat card ──────────────────────────────────────────────────────── */
.stat-card { background: var(--bg-surface); border-radius: 0.75rem; padding: 1.25rem; box-shadow: 0 1px 3px rgba(0,0,0,0.1); border: 1px solid var(--border); }
.stat-icon  { width: 3rem; height: 3rem; border-radius: 0.5rem; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; }

/* ── Payment method ─────────────────────────────────────────────────── */
.payment-method         { border: 2px solid var(--border); border-radius: var(--card-radius); padding: 1.25rem; cursor: pointer; transition: all 0.2s; text-align: center; }
.payment-method:hover   { border-color: var(--meta-blue); background: var(--bg-muted); }
.payment-method.selected{ border-color: var(--meta-blue); background: #EBF3FF; }
html.dark .payment-method.selected { background: rgba(0,100,224,0.12); }

/* ── Alert ──────────────────────────────────────────────────────────── */
.alert         { padding: 1rem 1.25rem; border-radius: 0.5rem; margin-bottom: 1rem; display: flex; align-items: flex-start; }
.alert-success { background: #dcfce7; color: #166534; border-left: 4px solid #22c55e; }
.alert-error   { background: #fee2e2; color: #991b1b; border-left: 4px solid #ef4444; }
.alert-warning { background: #fef3c7; color: #92400e; border-left: 4px solid #f59e0b; }
.alert-info    { background: #e0f2fe; color: #075985; border-left: 4px solid #0ea5e9; }

/* ── Login page ─────────────────────────────────────────────────────── */
.login-container { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #0064E0 0%, #0143B5 100%); }
.login-card      { width: 100%; max-width: 400px; padding: 2.5rem; background: var(--bg-surface); border-radius: var(--card-radius); box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25); }
html.dark .login-card { box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5); }

/* ── Quantity input ─────────────────────────────────────────────────── */
.quantity-wrapper { display: flex; align-items: center; }
.quantity-btn {
    width: 2.5rem; height: 2.5rem;
    border: 1px solid var(--border);
    background: var(--bg-surface);
    color: var(--text-secondary);
    border-radius: 0.375rem;
    font-weight: 600; cursor: pointer;
    transition: background 0.2s;
}
.quantity-btn:hover { background: var(--bg-muted); }
.quantity-input {
    width: 4rem; height: 2.5rem;
    border: 1px solid var(--border);
    background: var(--bg-surface);
    color: var(--text-primary);
    border-radius: 0.375rem;
    text-align: center;
    margin: 0 0.5rem;
    font-weight: 500;
}

/* ── Loading spinner ────────────────────────────────────────────────── */
.spinner { width: 1.25rem; height: 1.25rem; border: 2px solid var(--border); border-top-color: var(--meta-blue); border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Mobile navigation ──────────────────────────────────────────────── */
.mobile-nav { display: none; position: fixed; bottom: 0; left: 0; right: 0; background: var(--bg-surface); border-top: 1px solid var(--border); padding: 0.5rem; z-index: var(--z-overlay); }
@media (max-width: 767px) {
    .mobile-nav { display: flex; justify-content: space-around; }
    body { padding-bottom: 4rem; }
}
.mobile-nav-item   { display: flex; flex-direction: column; align-items: center; padding: 0.5rem; color: var(--text-muted); text-decoration: none; font-size: 0.75rem; transition: color 0.2s; }
.mobile-nav-item i { font-size: 1.25rem; margin-bottom: 0.25rem; }
.mobile-nav-item.active,
.mobile-nav-item:hover { color: var(--meta-blue); }

/* ── Utilities ──────────────────────────────────────────────────────── */
.text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.line-clamp-2  { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hero-gradient { background: linear-gradient(135deg, #0064E0 0%, #0143B5 50%, #004BB9 100%); }

/* Status dot */
.status-dot           { width: 0.5rem; height: 0.5rem; border-radius: 50%; display: inline-block; margin-right: 0.375rem; }
.status-dot.available { background: #22c55e; }
.status-dot.sold      { background: #ef4444; }
.status-dot.reserved  { background: #f59e0b; }

/* Copy button */
.copy-btn        { padding: 0.375rem 0.75rem; border-radius: 0.375rem; cursor: pointer; transition: all 0.2s; background: var(--bg-muted); border: none; color: var(--text-muted); }
.copy-btn:hover  { background: var(--border); color: var(--text-secondary); }
.copy-btn.copied { background: #dcfce7; color: #166534; }

/* Token utility classes */
.bg-surface         { background-color: var(--bg-surface); }
.bg-base            { background-color: var(--bg-base); }
.border-token       { border-color: var(--border); }
.text-primary-token { color: var(--text-primary); }
.text-secondary-token { color: var(--text-secondary); }
.text-muted-token   { color: var(--text-muted); }

/* ── Dark Mode Toggle Button ────────────────────────────────────────── */
.dark-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.25rem; height: 2.25rem;
    border-radius: var(--pill-radius);
    border: 1px solid var(--border);
    background: var(--bg-muted);
    color: var(--text-muted);
    cursor: pointer; transition: all 0.2s; flex-shrink: 0;
}
.dark-toggle:hover          { background: var(--bg-hover); color: var(--text-primary); border-color: var(--meta-blue); }
.dark-toggle .icon-sun      { display: none; }
.dark-toggle .icon-moon     { display: block; }
html.dark .dark-toggle .icon-sun  { display: block; }
html.dark .dark-toggle .icon-moon { display: none; }

/* ── Code / mono ────────────────────────────────────────────────────── */
html.dark code, html.dark .font-mono { color: #93c5fd; }
html.dark pre { background-color: #0f172a; border-color: #2d3f55; color: #e2e8f0; }

/* ═══════════════════════════════════════════════════════════════════════
   GLOBAL DARK OVERRIDES
   Override Tailwind utility classes — áp dụng khi html.dark bật.
   ═══════════════════════════════════════════════════════════════════════ */

/* Backgrounds */
html.dark .bg-white    { background-color: var(--bg-surface) !important; }
html.dark .bg-gray-50  { background-color: var(--bg-muted)   !important; }
html.dark .bg-gray-100 { background-color: #1a2844           !important; }
html.dark .bg-gray-200 { background-color: var(--bg-hover)   !important; }
html.dark .bg-gray-800 { background-color: #0d1421           !important; }
html.dark .bg-gray-900 { background-color: #060d18           !important; }

/* Modals & panels */
html.dark .bg-white.rounded-xl,
html.dark .bg-white.rounded-2xl,
html.dark .bg-white.rounded-lg,
html.dark .bg-white.shadow,
html.dark .bg-white.shadow-sm,
html.dark .bg-white.shadow-xl,
html.dark .bg-white.shadow-2xl {
    background-color: var(--bg-surface) !important;
    border-color: var(--border);
}

/* Borders */
html.dark .border-gray-100 { border-color: var(--border-muted) !important; }
html.dark .border-gray-200 { border-color: var(--border)       !important; }
html.dark .border-gray-300 { border-color: #334d66             !important; }
html.dark .border-gray-700 { border-color: rgba(255,255,255,0.08) !important; }
html.dark .divide-gray-100 > * + * { border-color: var(--border-muted) !important; }
html.dark .divide-gray-200 > * + * { border-color: var(--border)       !important; }
html.dark .border-b.border-gray-200,
html.dark nav.border-b     { border-color: var(--border) !important; }

/* Text */
html.dark .text-gray-900 { color: var(--text-primary)   !important; }
html.dark .text-gray-800 { color: #e2e8f0                !important; }
html.dark .text-gray-700 { color: var(--text-secondary)  !important; }
html.dark .text-gray-600 { color: var(--text-muted)      !important; }
html.dark .text-gray-500 { color: var(--text-subtle)     !important; }
html.dark .text-gray-400 { color: #94a3b8                !important; }
html.dark .text-gray-300 { color: #64748b                !important; }

/* Hover */
html.dark .hover\:bg-gray-50:hover  { background-color: var(--bg-hover) !important; }
html.dark .hover\:bg-gray-100:hover { background-color: #1a2844         !important; }
html.dark .hover\:bg-gray-200:hover { background-color: var(--bg-hover) !important; }
html.dark .hover\:text-gray-900:hover { color: var(--text-primary)  !important; }
html.dark .hover\:text-gray-700:hover { color: var(--text-secondary) !important; }

/* Focus ring */
html.dark .focus\:ring-blue-500:focus { --tw-ring-color: rgba(59,130,246,0.4); }

/* Inputs */
html.dark input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
html.dark select,
html.dark textarea {
    background-color: var(--bg-muted);
    border-color: var(--border);
    color: var(--text-primary);
}
html.dark input::placeholder,
html.dark textarea::placeholder { color: #475569; }
html.dark input:focus,
html.dark select:focus,
html.dark textarea:focus {
    background-color: var(--bg-surface);
    border-color: var(--primary);
    outline: none;
}

/* Tables */
html.dark thead            { background-color: var(--bg-muted)   !important; }
html.dark tbody tr:hover   { background-color: var(--bg-hover)   !important; }
html.dark table            { color: var(--text-secondary); }

/* Colored tint backgrounds */
html.dark .bg-blue-50   { background-color: rgba(59,130,246,0.12)  !important; }
html.dark .bg-green-50  { background-color: rgba(34,197,94,0.10)   !important; }
html.dark .bg-red-50    { background-color: rgba(239,68,68,0.10)   !important; }
html.dark .bg-yellow-50 { background-color: rgba(245,158,11,0.10)  !important; }
html.dark .bg-orange-50 { background-color: rgba(249,115,22,0.10)  !important; }
html.dark .bg-purple-50 { background-color: rgba(168,85,247,0.10)  !important; }
html.dark .bg-violet-50 { background-color: rgba(139,92,246,0.10)  !important; }
html.dark .bg-indigo-50 { background-color: rgba(99,102,241,0.10)  !important; }
html.dark .bg-pink-50   { background-color: rgba(236,72,153,0.10)  !important; }
html.dark .bg-teal-50   { background-color: rgba(20,184,166,0.10)  !important; }
html.dark .bg-cyan-50   { background-color: rgba(6,182,212,0.10)   !important; }
html.dark .bg-sky-50    { background-color: rgba(14,165,233,0.10)  !important; }
html.dark .bg-lime-50   { background-color: rgba(132,204,22,0.10)  !important; }

html.dark .bg-blue-100   { background-color: rgba(219,234,254,0.18) !important; }
html.dark .bg-green-100  { background-color: rgba(220,252,231,0.15) !important; }
html.dark .bg-red-100    { background-color: rgba(254,226,226,0.15) !important; }
html.dark .bg-yellow-100 { background-color: rgba(254,243,199,0.15) !important; }
html.dark .bg-orange-100 { background-color: rgba(255,237,213,0.15) !important; }
html.dark .bg-purple-100 { background-color: rgba(243,232,255,0.15) !important; }
html.dark .bg-violet-100 { background-color: rgba(237,233,254,0.15) !important; }
html.dark .bg-indigo-100 { background-color: rgba(224,231,255,0.15) !important; }
html.dark .bg-pink-100   { background-color: rgba(252,231,243,0.15) !important; }
html.dark .bg-teal-100   { background-color: rgba(204,251,241,0.15) !important; }
html.dark .bg-cyan-100   { background-color: rgba(207,250,254,0.15) !important; }
html.dark .bg-sky-100    { background-color: rgba(224,242,254,0.15) !important; }
html.dark .bg-lime-100   { background-color: rgba(236,252,203,0.15) !important; }

html.dark .border-blue-100   { border-color: rgba(59,130,246,0.25)  !important; }
html.dark .border-green-100  { border-color: rgba(34,197,94,0.25)   !important; }
html.dark .border-red-100    { border-color: rgba(239,68,68,0.25)   !important; }
html.dark .border-yellow-100 { border-color: rgba(245,158,11,0.25)  !important; }
html.dark .border-orange-100 { border-color: rgba(249,115,22,0.25)  !important; }
html.dark .border-purple-100 { border-color: rgba(168,85,247,0.25)  !important; }
html.dark .border-indigo-100 { border-color: rgba(99,102,241,0.25)  !important; }
html.dark .border-pink-100   { border-color: rgba(236,72,153,0.25)  !important; }
html.dark .border-teal-100   { border-color: rgba(20,184,166,0.25)  !important; }
html.dark .border-cyan-100   { border-color: rgba(6,182,212,0.25)   !important; }

/* Shadow */
html.dark .shadow-sm  { box-shadow: 0 1px 3px rgba(0,0,0,0.4)  !important; }
html.dark .shadow     { box-shadow: 0 1px 3px rgba(0,0,0,0.5)  !important; }
html.dark .shadow-xl  { box-shadow: 0 20px 25px -5px rgba(0,0,0,0.5) !important; }

/* Modal backdrop */
html.dark .bg-black\/50    { background-color: rgba(0,0,0,0.7)      !important; }
html.dark .bg-gray-900\/50 { background-color: rgba(6,13,24,0.75)   !important; }

/* ═══════════════════════════════════════════════════════════════════════
   META DESIGN SYSTEM — DARK MODE OVERRIDES
   Override Tailwind arbitrary-value classes dùng màu Meta Design System.
   ═══════════════════════════════════════════════════════════════════════ */

/* Navbar frosted glass */
html.dark .bg-white\/90 { background-color: rgba(30,41,59,0.92) !important; }
html.dark .bg-white\/80 { background-color: rgba(30,41,59,0.85) !important; }

/* Page / section backgrounds */
html.dark .bg-\[\#F1F4F7\]  { background-color: var(--bg-muted)   !important; }
html.dark .bg-\[\#DEE3E9\]  { background-color: var(--bg-hover)   !important; }

/* Baby-blue tint boxes (info, balance badge, key info) */
html.dark .bg-\[\#EBF3FF\]  { background-color: rgba(0,100,224,0.12) !important; }

/* Dark hero/footer sections — already dark, keep untouched */
/* html.dark .bg-\[\#1C1E21\]  — intentional dark, no override */

/* Meta Blue CTA bg — keep brand color on dark */
/* html.dark .bg-\[\#0064E0\]  — keep */

/* Success green header — keep */
/* html.dark .bg-\[\#31A24C\]  — keep */

/* Headings: Dark Charcoal → near-white */
html.dark .text-\[\#1C2B33\] { color: var(--text-primary)   !important; }

/* Body / secondary text: Slate Gray → medium gray */
html.dark .text-\[\#5D6C7B\] { color: var(--text-secondary) !important; }

/* Meta Blue text links/labels → Meta Blue Light (legible on dark) */
html.dark .text-\[\#0064E0\] { color: #47A5FA !important; }

/* Hover text overrides */
html.dark .hover\:text-\[\#0064E0\]:hover  { color: #47A5FA !important; }
html.dark .hover\:text-\[\#0143B5\]:hover  { color: #47A5FA !important; }
html.dark .hover\:text-\[\#1C2B33\]:hover  { color: var(--text-primary) !important; }

/* Meta Blue Light — already visible on dark, keep */
/* html.dark .text-\[\#47A5FA\]  — keep */

/* Disabled / muted text — slightly lighten */
html.dark .text-\[\#8595A4\] { color: #64748b !important; }

/* Borders */
html.dark .border-\[\#DEE3E9\]        { border-color: var(--border)      !important; }
html.dark .border-\[\#F1F4F7\]        { border-color: var(--border-muted) !important; }

/* Hover backgrounds */
html.dark .hover\:bg-\[\#F1F4F7\]:hover  { background-color: var(--bg-hover)           !important; }
html.dark .hover\:bg-\[\#ddeeff\]:hover  { background-color: rgba(0,100,224,0.18)       !important; }
html.dark .hover\:bg-\[\#EBF3FF\]:hover  { background-color: rgba(0,100,224,0.18)       !important; }

/* Sidebar items (user/includes/header.php inline style overrides) */
html.dark .sidebar-item               { color: var(--text-secondary) !important; }
html.dark .sidebar-item:hover         { background: rgba(0,100,224,0.12) !important; color: #47A5FA !important; }
html.dark .sidebar-item.active        { background: rgba(0,100,224,0.15) !important; color: #47A5FA !important; border-right-color: #47A5FA !important; }

/* btn-secondary: text quá tối trên dark, nâng lên */
html.dark .btn-secondary {
    color: #cbd5e1 !important;
    border-color: rgba(255,255,255,0.15) !important;
}
html.dark .btn-secondary:hover {
    background: rgba(255,255,255,0.08) !important;
    color: #f1f5f9 !important;
}
/* Live Search hover */
html.dark .hover\:bg-violet-50:hover  { background-color: rgba(139,92,246,0.15) !important; }
html.dark .hover\:text-violet-700:hover { color: #a78bfa !important; }
html.dark .hover\:border-violet-300:hover { border-color: #7c3aed !important; }
/* Rebuild Cache hover */
html.dark .hover\:bg-amber-50:hover   { background-color: rgba(245,158,11,0.15) !important; }
html.dark .hover\:text-amber-700:hover { color: #fbbf24 !important; }
html.dark .hover\:border-amber-300:hover { border-color: #d97706 !important; }
/* Xóa Log hover */
html.dark .hover\:bg-red-50:hover     { background-color: rgba(239,68,68,0.15)  !important; }
html.dark .hover\:text-red-600:hover  { color: #f87171 !important; }
html.dark .hover\:border-red-300:hover { border-color: #dc2626 !important; }

/* Cards with rounded-[20px] shadow */
html.dark .rounded-\[20px\].bg-white  { background-color: var(--bg-surface) !important; }
html.dark .shadow-\[0_12px_28px_rgba\(0\2c 0\2c 0\2c 0\.3\)\2c _0_2px_4px_rgba\(0\2c 0\2c 0\2c 0\.15\)\] {
    box-shadow: 0 12px 28px rgba(0,0,0,0.5), 0 2px 4px rgba(0,0,0,0.3) !important;
}