/* ============================================
   Theme Variables - White (Default)
   Note: White theme sử dụng CSS variables từ clean-style.css
   ============================================ */

/* ============================================
   Theme: Night (Dark Mode)
   ============================================ */
[data-theme="night"] {
    --bg-primary: #1f2937;
    --bg-secondary: #111827;
    --bg-tertiary: #0f172a;
    --text-primary: #f9fafb;
    --text-secondary: #e5e7eb;
    --text-muted: #9ca3af;
    --border-color: #374151;
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
    /* Override CSS variables từ clean-style.css */
    --bg-card: #1f2937;
    --bg-hover: #0f172a;
    --border-hover: #4b5563;
}

[data-theme="night"] body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

[data-theme="night"] .navbar {
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
}

[data-theme="night"] .navbar .nav-link {
    color: var(--text-primary);
}

[data-theme="night"] .navbar .nav-link:hover {
    color: var(--primary, #818cf8);
}

[data-theme="night"] .navbar .logo-text {
    color: var(--text-primary);
}

[data-theme="night"] .sidebar {
    background: var(--bg-secondary);
    border-right: 1px solid var(--border-color);
}

[data-theme="night"] .sidebar-item {
    color: var(--text-primary);
    background: var(--bg-primary);
    border-color: var(--border-color);
}

[data-theme="night"] .sidebar-item:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

[data-theme="night"] .sidebar-item.active {
    background: var(--primary, #6366f1);
    color: white;
}

[data-theme="night"] .rom-card {
    background: var(--bg-primary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="night"] .rom-card:hover {
    background: var(--bg-tertiary);
    border-color: var(--primary, #6366f1);
}

[data-theme="night"] .rom-card-title {
    color: var(--text-primary);
}

[data-theme="night"] .page-title {
    color: var(--text-primary);
}

[data-theme="night"] .page-description {
    color: var(--text-secondary);
}

[data-theme="night"] .content-page {
    background: var(--bg-primary);
}

[data-theme="night"] .rom-content-wrapper {
    background: var(--bg-primary);
    color: var(--text-primary);
}

[data-theme="night"] .back-link {
    color: var(--primary, #818cf8);
}

[data-theme="night"] .back-link:hover {
    color: var(--primary, #a5b4fc);
}

/* Hero section */
[data-theme="night"] .hero-section {
    background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
    color: var(--text-primary);
}

[data-theme="night"] .hero-title {
    color: var(--text-primary);
}

[data-theme="night"] .hero-description {
    color: var(--text-secondary);
}

/* Brand cards */
[data-theme="night"] .brand-card {
    background: var(--bg-primary);
    border-color: var(--border-color);
}

[data-theme="night"] .brand-card:hover {
    background: var(--bg-tertiary);
    border-color: var(--primary, #6366f1);
}

[data-theme="night"] .brand-name {
    color: var(--text-primary);
}

/* Disclaimer banner - giữ nguyên màu đỏ */
[data-theme="night"] .disclaimer-banner {
    background: rgba(255, 107, 107, 0.95) !important;
    color: white !important;
}

[data-theme="night"] .footer {
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
    color: var(--text-primary);
}

[data-theme="night"] .footer-title {
    color: var(--text-primary);
}

[data-theme="night"] .footer-text,
[data-theme="night"] .footer-links a {
    color: var(--text-secondary);
}

[data-theme="night"] .footer-links a:hover {
    color: var(--text-primary);
}

[data-theme="night"] .footer-disclaimer {
    color: var(--text-muted);
}

/* ============================================
   Dark Mode - Override tất cả text màu tối
   ============================================ */

/* Override tất cả các phần tử text trong content */
[data-theme="night"] .rom-content-wrapper,
[data-theme="night"] .rom-content-wrapper * {
    color: var(--text-primary) !important;
}

/* Override các phần tử cụ thể */
[data-theme="night"] .rom-content-wrapper p,
[data-theme="night"] .rom-content-wrapper span,
[data-theme="night"] .rom-content-wrapper li,
[data-theme="night"] .rom-content-wrapper td,
[data-theme="night"] .rom-content-wrapper th,
[data-theme="night"] .rom-content-wrapper div {
    color: var(--text-primary) !important;
}

/* Override các heading */
[data-theme="night"] .rom-content-wrapper h1,
[data-theme="night"] .rom-content-wrapper h2,
[data-theme="night"] .rom-content-wrapper h3,
[data-theme="night"] .rom-content-wrapper h4,
[data-theme="night"] .rom-content-wrapper h5,
[data-theme="night"] .rom-content-wrapper h6 {
    color: var(--text-primary) !important;
}

/* Override các phần tử có class cụ thể từ Google Docs */
[data-theme="night"] .rom-content-wrapper .tyJCtd,
[data-theme="night"] .rom-content-wrapper .mGzaTb,
[data-theme="night"] .rom-content-wrapper .baZpAe,
[data-theme="night"] .rom-content-wrapper .zfr3Q,
[data-theme="night"] .rom-content-wrapper .CDt4Ke,
[data-theme="night"] .rom-content-wrapper .C9DxTc {
    color: var(--text-primary) !important;
}

/* Override màu đen (#000, #000000, black) */
[data-theme="night"] .rom-content-wrapper [style*="color: #000"],
[data-theme="night"] .rom-content-wrapper [style*="color:#000"],
[data-theme="night"] .rom-content-wrapper [style*="color: #000000"],
[data-theme="night"] .rom-content-wrapper [style*="color:#000000"],
[data-theme="night"] .rom-content-wrapper [style*="color: black"],
[data-theme="night"] .rom-content-wrapper [style*="color:black"] {
    color: var(--text-primary) !important;
}

/* Override màu xám đen (#111, #222, #333, #444, #555) */
[data-theme="night"] .rom-content-wrapper [style*="color: #111"],
[data-theme="night"] .rom-content-wrapper [style*="color: #222"],
[data-theme="night"] .rom-content-wrapper [style*="color: #333"],
[data-theme="night"] .rom-content-wrapper [style*="color: #444"],
[data-theme="night"] .rom-content-wrapper [style*="color: #555"],
[data-theme="night"] .rom-content-wrapper [style*="color: #292929"] {
    color: var(--text-primary) !important;
}

/* Override màu đỏ - đổi sang màu đỏ sáng hơn */
[data-theme="night"] .rom-content-wrapper [style*="color: #ff0000"],
[data-theme="night"] .rom-content-wrapper [style*="color:#ff0000"],
[data-theme="night"] .rom-content-wrapper [style*="color: #f00"],
[data-theme="night"] .rom-content-wrapper [style*="color:#f00"],
[data-theme="night"] .rom-content-wrapper [style*="color: red"],
[data-theme="night"] .rom-content-wrapper [style*="color: #cc0000"],
[data-theme="night"] .rom-content-wrapper [style*="color: #ff0000"] {
    color: #ff6b6b !important; /* Đỏ sáng hơn cho dark mode */
}

/* Override màu xanh đen (#050505, #111111, etc.) */
[data-theme="night"] .rom-content-wrapper [style*="color: #050505"],
[data-theme="night"] .rom-content-wrapper [style*="color: #111111"],
[data-theme="night"] .rom-content-wrapper [style*="color: #1f2937"] {
    color: var(--text-primary) !important;
}

/* Override các link - đổi sang màu sáng */
[data-theme="night"] .rom-content-wrapper a {
    color: var(--primary-light, #a5b4fc) !important;
}

[data-theme="night"] .rom-content-wrapper a:hover {
    color: var(--primary, #818cf8) !important;
}

/* Override các phần tử có màu trong inline style */
[data-theme="night"] .rom-content-wrapper [style*="color"] {
    /* Sẽ được override bởi các rule cụ thể ở trên */
}

/* Override cho các phần tử khác */
[data-theme="night"] .tool-name {
    color: var(--text-primary) !important;
}

[data-theme="night"] .tool-description {
    color: var(--text-secondary) !important;
}

[data-theme="night"] .section-subtitle {
    color: var(--text-primary) !important;
}

[data-theme="night"] .intro-content h2 {
    color: var(--text-primary) !important;
}

[data-theme="night"] .intro-content p {
    color: var(--text-secondary) !important;
}

[data-theme="night"] .sidebar-section-title {
    color: var(--text-muted) !important;
}

[data-theme="night"] .sidebar-text {
    color: var(--text-primary) !important;
}

[data-theme="night"] .sidebar-icon {
    color: var(--text-secondary) !important;
}

[data-theme="night"] .sidebar-item.active .sidebar-icon {
    color: white !important;
}

/* Override cho các phần tử trong page content */
[data-theme="night"] .page-content * {
    color: var(--text-primary) !important;
}

[data-theme="night"] .page-content p,
[data-theme="night"] .page-content span,
[data-theme="night"] .page-content li,
[data-theme="night"] .page-content div {
    color: var(--text-primary) !important;
}

/* Override cho các phần tử có màu tối trong content */
[data-theme="night"] .content-page * {
    color: inherit;
}

[data-theme="night"] .content-page p,
[data-theme="night"] .content-page span,
[data-theme="night"] .content-page li {
    color: var(--text-primary) !important;
}

/* Đảm bảo tất cả text trong main content */
[data-theme="night"] .main-content,
[data-theme="night"] .main-content * {
    color: var(--text-primary) !important;
}

[data-theme="night"] .main-content p,
[data-theme="night"] .main-content span,
[data-theme="night"] .main-content li,
[data-theme="night"] .main-content div {
    color: var(--text-primary) !important;
}

/* Override cho các phần tử có màu trong style attribute */
[data-theme="night"] [style*="color: rgb(0, 0, 0)"],
[data-theme="night"] [style*="color:rgb(0,0,0)"],
[data-theme="night"] [style*="color: rgb(17, 17, 17)"],
[data-theme="night"] [style*="color: rgb(41, 41, 41)"] {
    color: var(--text-primary) !important;
}

/* Override cho các phần tử có màu đỏ trong style */
[data-theme="night"] [style*="color: rgb(255, 0, 0)"],
[data-theme="night"] [style*="color:rgb(255,0,0)"],
[data-theme="night"] [style*="color: rgb(204, 0, 0)"] {
    color: #ff6b6b !important;
}

/* Override tổng quát cho tất cả text màu tối - áp dụng cho toàn bộ website */
[data-theme="night"] * {
    /* Override màu đen và các màu tối */
}

/* Override cụ thể cho các phần tử có màu tối */
[data-theme="night"] span[style*="color"],
[data-theme="night"] p[style*="color"],
[data-theme="night"] div[style*="color"],
[data-theme="night"] li[style*="color"],
[data-theme="night"] td[style*="color"],
[data-theme="night"] th[style*="color"] {
    /* Sẽ được override bởi các rule cụ thể ở trên */
}

/* Override cho các phần tử trong brand cards và rom cards */
[data-theme="night"] .brand-card *,
[data-theme="night"] .rom-card * {
    color: var(--text-primary) !important;
}

[data-theme="night"] .brand-card .brand-name,
[data-theme="night"] .rom-card .rom-card-title {
    color: var(--text-primary) !important;
}

/* Override cho các phần tử trong tool content section */
[data-theme="night"] .tool-content-section * {
    color: var(--text-primary) !important;
}

[data-theme="night"] .tool-content-section p,
[data-theme="night"] .tool-content-section span,
[data-theme="night"] .tool-content-section li,
[data-theme="night"] .tool-content-section div {
    color: var(--text-primary) !important;
}

/* Override cho các phần tử trong hero section */
[data-theme="night"] .hero-section * {
    color: var(--text-primary) !important;
}

/* Override cho các phần tử trong sidebar */
[data-theme="night"] .sidebar * {
    color: var(--text-primary) !important;
}

[data-theme="night"] .sidebar .sidebar-section-title {
    color: var(--text-muted) !important;
}

/* Override cho các phần tử có class từ Google Docs với màu tối */
[data-theme="night"] .C9DxTc[style*="color: #000"],
[data-theme="night"] .C9DxTc[style*="color:#000"],
[data-theme="night"] .C9DxTc[style*="color: #111"],
[data-theme="night"] .C9DxTc[style*="color: #222"],
[data-theme="night"] .C9DxTc[style*="color: #333"],
[data-theme="night"] .C9DxTc[style*="color: #292929"],
[data-theme="night"] .C9DxTc[style*="color: #050505"] {
    color: var(--text-primary) !important;
}

/* Override cho các phần tử có màu đỏ trong Google Docs classes */
[data-theme="night"] .C9DxTc[style*="color: #ff0000"],
[data-theme="night"] .C9DxTc[style*="color:#ff0000"],
[data-theme="night"] .C9DxTc[style*="color: #f00"],
[data-theme="night"] .C9DxTc[style*="color: #cc0000"] {
    color: #ff6b6b !important;
}

/* Override cho các phần tử có màu xanh đen */
[data-theme="night"] [style*="color: #000080"],
[data-theme="night"] [style*="color: #001122"],
[data-theme="night"] [style*="color: #003366"] {
    color: var(--text-primary) !important;
}

/* Đảm bảo tất cả text trong body đều sáng */
[data-theme="night"] body {
    color: var(--text-primary) !important;
}

/* Override cho các phần tử có màu tối trong các section */
[data-theme="night"] section *,
[data-theme="night"] article *,
[data-theme="night"] aside * {
    color: var(--text-primary) !important;
}

/* ============================================
   Dark Mode - Override cho các Button
   ============================================ */

/* Tool selection buttons trong hero section */
[data-theme="night"] .tab-btn {
    background: var(--bg-primary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

[data-theme="night"] .tab-btn .tab-name {
    color: var(--text-primary) !important;
}

[data-theme="night"] .tab-btn .tab-icon {
    color: var(--text-primary) !important;
}

[data-theme="night"] .tab-btn:hover {
    background: var(--bg-tertiary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

[data-theme="night"] .tab-btn:hover .tab-name {
    color: var(--text-primary) !important;
}

[data-theme="night"] .tab-btn:hover .tab-icon {
    color: var(--text-primary) !important;
}

/* Button active vẫn giữ màu trắng */
[data-theme="night"] .tab-btn.active {
    color: white !important;
}

[data-theme="night"] .tab-btn.active .tab-name {
    color: white !important;
}

[data-theme="night"] .tab-btn.active .tab-icon {
    color: white !important;
}

/* Override cho tất cả các button khác */
[data-theme="night"] button {
    color: var(--text-primary) !important;
}

[data-theme="night"] button:not(.tab-btn.active) {
    background: var(--bg-primary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

[data-theme="night"] button:not(.tab-btn.active):hover {
    background: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
}

/* Override cho các button có class cụ thể */
[data-theme="night"] .btn,
[data-theme="night"] .button,
[data-theme="night"] input[type="button"],
[data-theme="night"] input[type="submit"] {
    background: var(--bg-primary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

[data-theme="night"] .btn:hover,
[data-theme="night"] .button:hover,
[data-theme="night"] input[type="button"]:hover,
[data-theme="night"] input[type="submit"]:hover {
    background: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
}

/* Override cho các button trong content */
[data-theme="night"] .rom-content-wrapper button,
[data-theme="night"] .page-content button,
[data-theme="night"] .content-page button {
    background: var(--bg-primary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

[data-theme="night"] .rom-content-wrapper button:hover,
[data-theme="night"] .page-content button:hover,
[data-theme="night"] .content-page button:hover {
    background: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
}