/*
 * Theme toggle button + manual dark-mode tweaks.
 * Bulk dark overrides nằm ở dark.css + dark-single.css (auto-generated).
 * File này chỉ chứa: toggle UI, smooth transition, link/UI overrides AI khó tự generate.
 */

/* ─────────────────────────────────────────────────────────
   TOGGLE BUTTON (sun/moon swap)
   ───────────────────────────────────────────────────────── */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin: 0 6px;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 50%;
    color: #475569;
    cursor: pointer;
    transition: background .2s, color .2s, border-color .2s, transform .2s;
}
.theme-toggle:hover {
    background: rgba(0,0,0,.06);
    color: #1e293b;
    transform: scale(1.05);
}
.theme-toggle:active { transform: scale(.95); }
.theme-toggle:focus-visible { outline: 2px solid #2271b1; outline-offset: 2px; }
.theme-toggle .theme-icon-sun,
.theme-toggle .theme-icon-moon { pointer-events: none; }
.theme-toggle .theme-icon-moon { display: none; }
.theme-toggle .theme-icon-sun  { display: block; }

[data-theme="dark"] .theme-toggle .theme-icon-sun  { display: none; }
[data-theme="dark"] .theme-toggle .theme-icon-moon { display: block; }
[data-theme="dark"] .theme-toggle { color: #fbbf24; border-color: rgba(255,255,255,.15); }
[data-theme="dark"] .theme-toggle:hover { background: rgba(255,255,255,.10); color: #fcd34d; }

/* Desktop: header-right thành flex, search box thu ngắn nhường chỗ toggle */
@media (min-width: 768px) {
    .header-right {
        display: flex;
        align-items: center;
        gap: 4px;
    }
    .header-right .search-form {
        flex: 1;
        min-width: 0;
    }
}

/* Mobile: ẩn desktop toggle <992px (tạm chưa có toggle mobile để test desktop trước) */
@media (max-width: 991px) {
    #theme-toggle-desktop { display: none !important; }
}

/* ─────────────────────────────────────────────────────────
   SMOOTH TRANSITION khi toggle
   ───────────────────────────────────────────────────────── */
body, .header-wrapper, .header-logo-wrapper, .header-logo, .footer_all,
.sidebar, #rsidebar, .widget, .result-card, .wcat-item, .wcat-card,
.wcat-compact, .wcat-hero, .postContent, .postContent_page,
#page, .site-main, #content, #content_pages,
.navlist a, .sub-menu, button, input, textarea {
    transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

/* ─────────────────────────────────────────────────────────
   MANUAL OVERRIDES (auto-generator khó suy luận)
   ───────────────────────────────────────────────────────── */

/* color-scheme hint cho UA defaults (scrollbar, form controls) */
[data-theme="dark"] { color-scheme: dark; }

/* Link distinction: auto-generator đã đổi a{} thành text-light, làm mất link blue.
   Override để link có màu xanh nhạt nổi bật, ngoại trừ link trong button/nav/card title. */
[data-theme="dark"] .postContent a,
[data-theme="dark"] .postContent_page a,
[data-theme="dark"] p > a,
[data-theme="dark"] li > a {
    color: #93c5fd;
}
[data-theme="dark"] .postContent a:hover,
[data-theme="dark"] .postContent_page a:hover,
[data-theme="dark"] p > a:hover,
[data-theme="dark"] li > a:hover {
    color: #bfdbfe;
}

/* Search form inputs cần explicit dark style — auto thường miss type="search" */
[data-theme="dark"] input[type="search"],
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] textarea,
[data-theme="dark"] select {
    background: #1e293b;
    color: #e2e8f0;
    border: 1px solid #334155;
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: #64748b;
}

/* Submit/search button trong header thường có image bg, không cần dark transform */

/* Mobile menu nav backgrounds (ko nằm trong style.css mà cssmenu plugin cũ) */
[data-theme="dark"] .navlist,
[data-theme="dark"] .sub-menu {
    background: #1e293b;
}
[data-theme="dark"] .navlist a,
[data-theme="dark"] .sub-menu a {
    color: #e2e8f0;
}
[data-theme="dark"] .navlist a:hover,
[data-theme="dark"] .sub-menu a:hover {
    color: #fbbf24;
    background: rgba(255,255,255,.04);
}

/* Hamburger icon stripes: black on light, white on dark */
[data-theme="dark"] .open-menu .item {
    background: #e2e8f0;
}

/* Cookies consent banner */
[data-theme="dark"] .cookies-consent,
[data-theme="dark"] #cookies-consent {
    background: #1e293b;
    color: #e2e8f0;
    border-color: #334155;
}

/* Ad areas — keep transparent (ad iframes have own bg) */
[data-theme="dark"] .first-ads,
[data-theme="dark"] .second-ads,
[data-theme="dark"] .web-ads,
[data-theme="dark"] .mobile-ads,
[data-theme="dark"] .ads-300,
[data-theme="dark"] .mine-banner,
[data-theme="dark"] .head-ads-wrap,
[data-theme="dark"] .top-section,
[data-theme="dark"] .bottom-section {
    background: transparent;
}

/* Comment box (mlc-) — gọi nhiều style inline, force override */
[data-theme="dark"] .mlc-me,
[data-theme="dark"] .mlc-login-prompt,
[data-theme="dark"] .commentlist > li,
[data-theme="dark"] .comment-respond {
    background: #1e293b !important;
    color: #e2e8f0 !important;
    border-color: #334155 !important;
}