/* ============================================================
   DOUYIN2FB — LIGHT MODE OVERRIDE (Triệt để)
   Áp dụng khi <html data-mode="light">
   Thiết kế: Clean Frost White — Apple macOS Ventura Inspired
   ============================================================ */

/* ══ 1. BODY & BACKGROUND ══════════════════════════════════════════════ */
[data-mode="light"],
[data-mode="light"] body {
    background-color: #eef2f7 !important;
    color: #0f172a !important;
}

/* Aurora background overlay — màu nhạt hơn cho nền sáng */
[data-mode="light"] body::before {
    background:
        radial-gradient(ellipse 900px 500px at 10% -5%, rgba(0, 113, 227, 0.07) 0%, transparent 60%),
        radial-gradient(ellipse 750px 450px at 85% 90%, rgba(99, 102, 241, 0.05) 0%, transparent 65%),
        radial-gradient(ellipse 600px 400px at 50% 50%, rgba(168, 85, 247, 0.03) 0%, transparent 60%) !important;
}

/* Dot texture — tối hơn trên nền sáng */
[data-mode="light"] body::after {
    background-image: radial-gradient(rgba(0, 0, 0, 0.06) 1px, transparent 1px) !important;
    opacity: 0.6 !important;
}

/* ══ 2. SIDEBAR ═════════════════════════════════════════════════════════ */
[data-mode="light"] .sidebar {
    background: rgba(255, 255, 255, 0.88) !important;
    backdrop-filter: blur(40px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(40px) saturate(180%) !important;
    border-right: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.08), inset -1px 0 0 rgba(0, 0, 0, 0.04) !important;
}

[data-mode="light"] .brand-info h2 {
    background: linear-gradient(135deg, #0f172a, #1e3a5f) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

[data-mode="light"] .brand-info span {
    color: #94a3b8 !important;
}

[data-mode="light"] .nav-section-title {
    color: #94a3b8 !important;
}

[data-mode="light"] .nav-item {
    color: #475569 !important;
    border-color: transparent !important;
}

[data-mode="light"] .nav-item:hover {
    color: #0f172a !important;
    background: rgba(0, 0, 0, 0.04) !important;
    border-color: rgba(0, 0, 0, 0.06) !important;
}

[data-mode="light"] .nav-item.active {
    color: #0071e3 !important;
    background: linear-gradient(90deg, rgba(0, 113, 227, 0.1), rgba(0, 113, 227, 0.04)) !important;
    border: 1px solid rgba(0, 113, 227, 0.2) !important;
    box-shadow: 0 4px 12px rgba(0, 113, 227, 0.08) !important;
}

[data-mode="light"] .nav-item.active::before {
    background: linear-gradient(to bottom, #0071e3, #47a3ff) !important;
    box-shadow: 0 0 8px rgba(0, 113, 227, 0.4) !important;
}

[data-mode="light"] .sidebar-footer {
    border-top-color: rgba(0, 0, 0, 0.07) !important;
}

[data-mode="light"] .sidebar-automation-widget {
    background: rgba(0, 0, 0, 0.03) !important;
    border-color: rgba(0, 0, 0, 0.07) !important;
}

[data-mode="light"] #userProfileCard {
    background: rgba(0, 0, 0, 0.025) !important;
    border-color: rgba(0, 0, 0, 0.07) !important;
}

[data-mode="light"] #userDisplayName {
    color: #0f172a !important;
}

[data-mode="light"] #userTierExpiryBadge {
    background: rgba(0, 0, 0, 0.03) !important;
    border-color: rgba(0, 0, 0, 0.06) !important;
    color: #64748b !important;
}

/* ══ 3. TOPBAR ══════════════════════════════════════════════════════════ */
[data-mode="light"] .topbar {
    border-bottom-color: rgba(0, 0, 0, 0.07) !important;
}

[data-mode="light"] .header-title h1 {
    color: #0f172a !important;
}

[data-mode="light"] .header-title p {
    color: #64748b !important;
}

/* ══ 4. BUTTONS ═════════════════════════════════════════════════════════ */
/* Ghost buttons on light */
[data-mode="light"] .btn,
[data-mode="light"] .stg-btn,
[data-mode="light"] .btn-ghost,
[data-mode="light"] .stg-btn--ghost,
[data-mode="light"] .btn-secondary {
    background: rgba(0, 0, 0, 0.04) !important;
    color: #374151 !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08) !important;
}

[data-mode="light"] .btn:hover,
[data-mode="light"] .stg-btn:hover,
[data-mode="light"] .btn-ghost:hover,
[data-mode="light"] .stg-btn--ghost:hover {
    background: rgba(0, 0, 0, 0.07) !important;
    color: #0f172a !important;
    border-color: rgba(0, 0, 0, 0.18) !important;
}

/* Outline button on light */
[data-mode="light"] .btn-outline,
[data-mode="light"] .stg-btn--outline {
    background: transparent !important;
    color: #475569 !important;
    border-color: rgba(0, 0, 0, 0.16) !important;
}

[data-mode="light"] .btn-outline:hover,
[data-mode="light"] .stg-btn--outline:hover {
    background: rgba(0, 0, 0, 0.05) !important;
    color: #0f172a !important;
    border-color: rgba(0, 0, 0, 0.28) !important;
}

/* Mode toggle button */
[data-mode="light"] .btn-mode-toggle {
    background: rgba(0, 0, 0, 0.04) !important;
    border-color: rgba(0, 0, 0, 0.12) !important;
    color: #374151 !important;
}

/* ══ 5. CARDS (stg-card) ════════════════════════════════════════════════ */
[data-mode="light"] .stg-card {
    background: rgba(255, 255, 255, 0.82) !important;
    backdrop-filter: blur(24px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(160%) !important;
    border: 1px solid rgba(0, 0, 0, 0.07) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.07), 0 1px 4px rgba(0, 0, 0, 0.04) !important;
}

[data-mode="light"] .stg-card:hover {
    border-color: rgba(0, 113, 227, 0.2) !important;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1) !important;
}

[data-mode="light"] .stg-card__inner {
    color: #0f172a !important;
}

[data-mode="light"] .stg-card__title {
    color: #0f172a !important;
}

[data-mode="light"] .stg-card__sub {
    color: #64748b !important;
}

/* Card accent bar stays colorful */
[data-mode="light"] .stg-card__accent {
    opacity: 0.85;
}

/* ══ 6. PANEL / CARD (legacy) ══════════════════════════════════════════ */
[data-mode="light"] .panel,
[data-mode="light"] .card {
    background: rgba(255, 255, 255, 0.82) !important;
    border-color: rgba(0, 0, 0, 0.07) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.07) !important;
}

[data-mode="light"] .panel-header {
    background: rgba(0, 0, 0, 0.02) !important;
    border-bottom-color: rgba(0, 0, 0, 0.06) !important;
}

[data-mode="light"] .panel-header h3 {
    color: #0f172a !important;
}

[data-mode="light"] .panel-glass {
    background: rgba(255, 255, 255, 0.72) !important;
}

/* ══ 7. FORM CONTROLS ══════════════════════════════════════════════════ */
[data-mode="light"] label {
    color: #64748b !important;
}

[data-mode="light"] .form-label {
    color: #64748b !important;
}

[data-mode="light"] .form-control,
[data-mode="light"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
[data-mode="light"] textarea,
[data-mode="light"] select {
    background: rgba(255, 255, 255, 0.9) !important;
    border-color: rgba(0, 0, 0, 0.14) !important;
    color: #0f172a !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06) inset !important;
}

[data-mode="light"] .form-control:focus,
[data-mode="light"] input:focus,
[data-mode="light"] textarea:focus,
[data-mode="light"] select:focus {
    border-color: #0071e3 !important;
    background: #fff !important;
    box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.15) !important;
}

[data-mode="light"] .form-control::placeholder,
[data-mode="light"] input::placeholder,
[data-mode="light"] textarea::placeholder {
    color: #94a3b8 !important;
}

[data-mode="light"] select.form-control option,
[data-mode="light"] select option {
    background: #fff !important;
    color: #0f172a !important;
}

/* ══ 8. VIDEO CARD / LIST ══════════════════════════════════════════════ */
[data-mode="light"] .video-card {
    background: rgba(255, 255, 255, 0.85) !important;
    border-color: rgba(0, 0, 0, 0.07) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
}

[data-mode="light"] .video-card:hover {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14) !important;
    border-color: rgba(0, 113, 227, 0.2) !important;
}

[data-mode="light"] .video-card-title {
    color: #0f172a !important;
}

[data-mode="light"] .video-card-meta {
    color: #64748b !important;
}

[data-mode="light"] .video-card-body {
    background: transparent !important;
}

/* Video list items */
[data-mode="light"] .video-list-item {
    background: rgba(255, 255, 255, 0.82) !important;
    border-color: rgba(0, 0, 0, 0.07) !important;
    color: #0f172a !important;
}

[data-mode="light"] .video-list-item:hover {
    background: rgba(255, 255, 255, 0.97) !important;
    border-color: rgba(0, 113, 227, 0.18) !important;
}

[data-mode="light"] .video-list-item.selected {
    background: rgba(0, 113, 227, 0.06) !important;
    border-color: rgba(0, 113, 227, 0.25) !important;
}

[data-mode="light"] .list-title {
    color: #0f172a !important;
}

[data-mode="light"] .list-meta {
    color: #64748b !important;
}

[data-mode="light"] .list-thumb {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

/* ══ 9. STAT CARDS ══════════════════════════════════════════════════════ */
[data-mode="light"] .stat-card {
    background: rgba(255, 255, 255, 0.85) !important;
    border-color: rgba(0, 0, 0, 0.07) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
}

[data-mode="light"] .stat-value {
    color: #0f172a !important;
}

/* ══ 10. WIDGET / SIDE ══════════════════════════════════════════════════ */
[data-mode="light"] .side-widget {
    background: rgba(255, 255, 255, 0.85) !important;
    border-color: rgba(0, 0, 0, 0.07) !important;
}

[data-mode="light"] .side-widget-header {
    color: #0f172a !important;
    border-bottom-color: rgba(0, 0, 0, 0.06) !important;
}

[data-mode="light"] .widget-info-item {
    border-bottom-color: rgba(0, 0, 0, 0.04) !important;
}

[data-mode="light"] .widget-info-item span {
    color: #64748b !important;
}

[data-mode="light"] .widget-info-item strong {
    color: #0f172a !important;
}

/* ══ 11. MODALS ═════════════════════════════════════════════════════════ */
[data-mode="light"] .modal-overlay {
    background: rgba(15, 23, 42, 0.35) !important;
    backdrop-filter: blur(8px) !important;
}

[data-mode="light"] .modal-box,
[data-mode="light"] .modal-container,
[data-mode="light"] .modal-content,
[data-mode="light"] [class*="modal"]>div {
    background: rgba(255, 255, 255, 0.97) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
    color: #0f172a !important;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.2) !important;
}

[data-mode="light"] .modal-header,
[data-mode="light"] .modal-footer {
    border-color: rgba(0, 0, 0, 0.08) !important;
    background: rgba(0, 0, 0, 0.02) !important;
}

[data-mode="light"] .modal-title {
    color: #0f172a !important;
}

[data-mode="light"] .modal-close {
    color: #64748b !important;
}

[data-mode="light"] .modal-close:hover {
    color: #0f172a !important;
    background: rgba(0, 0, 0, 0.06) !important;
}

/* ══ 12. TOAST ══════════════════════════════════════════════════════════ */
[data-mode="light"] .toast {
    background: rgba(255, 255, 255, 0.97) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
    color: #0f172a !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15) !important;
}

/* ══ 13. TABLE ══════════════════════════════════════════════════════════ */
[data-mode="light"] table {
    color: #0f172a !important;
}

[data-mode="light"] thead tr,
[data-mode="light"] th {
    background: rgba(0, 0, 0, 0.04) !important;
    color: #64748b !important;
    border-color: rgba(0, 0, 0, 0.07) !important;
}

[data-mode="light"] tbody tr {
    border-bottom-color: rgba(0, 0, 0, 0.04) !important;
}

[data-mode="light"] tbody tr:hover {
    background: rgba(0, 113, 227, 0.04) !important;
}

[data-mode="light"] td {
    color: #0f172a !important;
}

/* ══ 14. SCROLLBAR ══════════════════════════════════════════════════════ */
[data-mode="light"] ::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.16) !important;
}

[data-mode="light"] ::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.28) !important;
}

/* ══ 15. TABS ═══════════════════════════════════════════════════════════ */
[data-mode="light"] .tab-bar,
[data-mode="light"] .tabs-nav,
[data-mode="light"] .tab-nav {
    background: rgba(0, 0, 0, 0.04) !important;
    border-color: rgba(0, 0, 0, 0.07) !important;
}

[data-mode="light"] .tab-btn,
[data-mode="light"] .tab-link {
    color: #64748b !important;
}

[data-mode="light"] .tab-btn.active,
[data-mode="light"] .tab-link.active {
    background: #fff !important;
    color: #0071e3 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

/* ══ 16. LOG / ACTIVITY FEED ════════════════════════════════════════════ */
[data-mode="light"] .log-entry,
[data-mode="light"] .activity-item {
    border-bottom-color: rgba(0, 0, 0, 0.05) !important;
    color: #374151 !important;
}

[data-mode="light"] .log-entry:hover {
    background: rgba(0, 0, 0, 0.02) !important;
}

/* ══ 17. CODE BLOCKS ════════════════════════════════════════════════════ */
[data-mode="light"] code,
[data-mode="light"] pre {
    background: rgba(0, 0, 0, 0.05) !important;
    color: #1d4ed8 !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
}

/* ══ 18. BADGES & STATUS ════════════════════════════════════════════════ */
/* Badge text stays white (colored backgrounds look fine on light bg) */
[data-mode="light"] .badge-count {
    /* Keep gradient background, stays readable */
    color: #fff !important;
}

/* ══ 19. PAGE-SPECIFIC STG COMPONENTS ══════════════════════════════════ */
/* stg-page wrapper */
[data-mode="light"] .stg-page {
    color: #0f172a !important;
}

/* stg-icon-circle */
[data-mode="light"] .stg-icon-circle {
    /* keep background colors but ensure text visible */
}

/* Calendar cells */
[data-mode="light"] #calendarGrid>div,
[data-mode="light"] #calMonthGrid>div {
    background: rgba(255, 255, 255, 0.75) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
}

[data-mode="light"] #calHeatmap>div>div {
    /* heatmap cells — keep colored */
}

/* Queue list container */
[data-mode="light"] #queueListContainer {
    color: #0f172a !important;
}

/* Bulk toolbar */
[data-mode="light"] #bulkToolbar {
    background: rgba(0, 113, 227, 0.07) !important;
    border-color: rgba(0, 113, 227, 0.2) !important;
}

/* ══ 20. HARDCODED COLOR OVERRIDES ══════════════════════════════════════ */
/* Các element dùng hardcoded text color #f1f5f9 / #e2e8f0 / white */
[data-mode="light"] .stg-card *:not(i):not(.stg-card__accent):not(.badge-count):not([class*="badge-"]):not(.btn-primary):not(.stg-btn--primary):not(.stg-btn--save):not(.btn-success):not(.stg-icon-circle *):not(img) {
    /* Chỉ text nodes, không override colored badge/buttons */
    /* Handled via var(--text-1) above */
}

/* Explicit white text fixes */
[data-mode="light"] .nav-item span:not(.badge-count) {
    color: inherit !important;
}

/* Section titles in pages */
[data-mode="light"] h1:not(.brand-info h2),
[data-mode="light"] h2:not(.brand-info h2),
[data-mode="light"] h3,
[data-mode="light"] h4,
[data-mode="light"] h5 {
    color: #0f172a !important;
}

/* Para / span text */
[data-mode="light"] p {
    color: #374151 !important;
}

/* ══ 21. AURORA ORB BACKGROUND ELEMENTS ════════════════════════════════ */
[data-mode="light"] .stg-aurora-orb--1 {
    opacity: 0.3 !important;
    filter: blur(100px) !important;
}

[data-mode="light"] .stg-aurora-orb--2 {
    opacity: 0.2 !important;
    filter: blur(120px) !important;
}

[data-mode="light"] .stg-aurora-orb--3 {
    opacity: 0.15 !important;
    filter: blur(140px) !important;
}

/* ══ 22. QUICK STATUS CHIP ══════════════════════════════════════════════ */
[data-mode="light"] .quick-status-chip {
    background: rgba(255, 255, 255, 0.85) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
    color: #475569 !important;
}

/* ══ 23. TRANSITION: smooth mode switch ══════════════════════════════ */
html {
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* ══ 24. SETTINGS PAGE ══════════════════════════════════════════════════ */
/* Save bar (sticky bottom) */
[data-mode="light"] .stg-save-bar {
    background: rgba(255, 255, 255, 0.92) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08) !important;
}

[data-mode="light"] .stg-save-bar__left {
    color: #64748b !important;
}

/* Profile hero card (gradient dark background) */
[data-mode="light"] .settings-hero-card {
    background: rgba(255, 255, 255, 0.9) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important;
}

/* Override any .card with dark inline gradient in settings page */
[data-mode="light"] .stg-page .card {
    background: rgba(255, 255, 255, 0.88) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.07) !important;
    color: #0f172a !important;
}

/* Settings tab bar */
[data-mode="light"] .stg-tabs-bar,
[data-mode="light"] [style*="background: rgba(0,0,0,0.3)"],
[data-mode="light"] [style*="background:rgba(0,0,0,0.3)"] {
    background: rgba(0, 0, 0, 0.05) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
}

[data-mode="light"] .stg-tab-btn {
    color: #64748b !important;
}

[data-mode="light"] .stg-tab-btn.active,
[data-mode="light"] .stg-tab-btn[data-active="true"] {
    background: #fff !important;
    color: #0071e3 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

/* Info/help boxes with dark rgba */
[data-mode="light"] [style*="background: rgba(0,0,0,0.25)"],
[data-mode="light"] [style*="background:rgba(0,0,0,0.25)"] {
    background: rgba(0, 0, 0, 0.04) !important;
    color: #475569 !important;
}

/* ══ 25. DOWNLOADER / BATCH PAGES ═══════════════════════════════════════ */
/* Processing options toggle rows */
[data-mode="light"] .processing-options-row,
[data-mode="light"] [style*="background: rgba(255,255,255,0.03)"],
[data-mode="light"] [style*="background:rgba(255,255,255,0.03)"],
[data-mode="light"] [style*="background: rgba(255, 255, 255, 0.03)"] {
    background: rgba(0, 0, 0, 0.03) !important;
    border-color: rgba(0, 0, 0, 0.07) !important;
}

/* ══ 26. HISTORY PAGE ════════════════════════════════════════════════════ */
[data-mode="light"] .history-item,
[data-mode="light"] .posted-item {
    background: rgba(255, 255, 255, 0.85) !important;
    border-color: rgba(0, 0, 0, 0.07) !important;
}

/* ══ 27. TOPBAR GHOST ACTIONS ════════════════════════════════════════════ */
[data-mode="light"] .header-actions .stg-btn--ghost,
[data-mode="light"] .header-actions [style*="background:rgba(255,255,255,0.03)"],
[data-mode="light"] .header-actions [style*="background: rgba(255,255,255,0.03)"] {
    background: rgba(0, 0, 0, 0.04) !important;
    border-color: rgba(0, 0, 0, 0.12) !important;
    color: #374151 !important;
}

/* KBD shortcut hint */
[data-mode="light"] kbd {
    background: rgba(0, 0, 0, 0.07) !important;
    color: #475569 !important;
    border-color: rgba(0, 0, 0, 0.14) !important;
}

/* ══ 28. CONTENT ARCHIVE / HASHTAG CARDS ════════════════════════════════ */
[data-mode="light"] .hashtag-card,
[data-mode="light"] .content-card {
    background: rgba(255, 255, 255, 0.88) !important;
    border-color: rgba(0, 0, 0, 0.07) !important;
}

/* ══ 29. AFFILIATE TABLE ════════════════════════════════════════════════ */
[data-mode="light"] .affiliate-table-wrap {
    background: rgba(255, 255, 255, 0.88) !important;
}

[data-mode="light"] tr:nth-child(even) {
    background: rgba(0, 0, 0, 0.02) !important;
}

/* ══ 30. DROPDOWN MENUS ════════════════════════════════════════════════ */
[data-mode="light"] #themeDropdownMenu {
    background: rgba(255, 255, 255, 0.97) !important;
    border-color: rgba(0, 0, 0, 0.12) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.14) !important;
}

[data-mode="light"] #themeDropdownMenu button {
    color: #374151 !important;
}

[data-mode="light"] #themeDropdownMenu div[style*="color:#94a3b8"] {
    color: #94a3b8 !important;
}

/* ══ 31. EMPTY STATE ════════════════════════════════════════════════════ */
[data-mode="light"] .empty-state h3,
[data-mode="light"] .empty-state [style*="color: #f1f5f9"],
[data-mode="light"] .empty-state [style*="color:#f1f5f9"] {
    color: #0f172a !important;
}

[data-mode="light"] .empty-state p {
    color: #64748b !important;
}

/* ══ 32. USER CHANNEL FOLLOWER PAGE ════════════════════════════════════ */
[data-mode="light"] .channel-item,
[data-mode="light"] .channel-card {
    background: rgba(255, 255, 255, 0.88) !important;
    border-color: rgba(0, 0, 0, 0.07) !important;
}

[data-mode="light"] .channel-card:hover {
    border-color: rgba(0, 113, 227, 0.2) !important;
}