/* ============================================
   DARK MODE GLOBAL STYLES
   ============================================ */

/* Apply dark mode on both html and body for early flash prevention */
html.dark-mode,
body.dark-mode {
    background-color: #121212 !important;
    color: #e0e0e0 !important;
}

/* --- Containers & Sections --- */
body.dark-mode .navbar-default,
body.dark-mode header,
body.dark-mode .footer,
body.dark-mode .card,
body.dark-mode .panel,
body.dark-mode .well,
body.dark-mode .sidebar-widget,
body.dark-mode .block-inner,
body.dark-mode .news-feed,
body.dark-mode .headding-news,
body.dark-mode .tab-inner,
body.dark-mode .feed-inner,
body.dark-mode .widget-inner,
body.dark-mode .post-wrapper,
body.dark-mode .post-info,
body.dark-mode .item,
body.dark-mode .box-item {
    background-color: #1e1e1e !important;
    border-color: #333 !important;
}

/* --- White Banner / Logo area --- */
body.dark-mode .custom-white-banner,
body.dark-mode .top_banner_wrap {
    background-color: #1a1a1a !important;
    border-bottom-color: #333 !important;
}

/* --- Links --- */
body.dark-mode a {
    color: #90caf9;
}

body.dark-mode a:hover {
    color: #64b5f6;
}

/* --- Headings --- */
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6,
body.dark-mode .widget-title,
body.dark-mode .category-headding {
    color: #ffffff !important;
}

/* --- News titles --- */
body.dark-mode .news-title a,
body.dark-mode .post-title a,
body.dark-mode .post-style1 h3 a,
body.dark-mode .post-style2 h4 a,
body.dark-mode .post-style2-detail h4 a,
body.dark-mode .td-module-title a,
body.dark-mode .home2-post h3 a,
body.dark-mode .home2-post h5 a {
    color: #e0e0e0 !important;
}

body.dark-mode .news-title a:hover,
body.dark-mode .post-title a:hover,
body.dark-mode .post-style1 h3 a:hover,
body.dark-mode .post-style2 h4 a:hover,
body.dark-mode .td-module-title a:hover {
    color: #90caf9 !important;
}

/* --- Muted text / meta info --- */
body.dark-mode .text-muted,
body.dark-mode .news-meta,
body.dark-mode .post-meta,
body.dark-mode .post-author-name a,
body.dark-mode .post-date,
body.dark-mode .post-editor-date,
body.dark-mode .entry-info span,
body.dark-mode p {
    color: #aaaaaa !important;
}

/* --- Footer --- */
body.dark-mode .footer-area,
body.dark-mode footer,
body.dark-mode .fo_bg {
    background-color: #0d0d0d !important;
    color: #ccc !important;
}

body.dark-mode .footer-area a,
body.dark-mode footer a {
    color: #90caf9 !important;
}

body.dark-mode .footer-area a:hover,
body.dark-mode footer a:hover {
    color: #64b5f6 !important;
}

/* --- Forms & Inputs --- */
body.dark-mode input,
body.dark-mode textarea,
body.dark-mode select,
body.dark-mode .form-control {
    background-color: #2a2a2a !important;
    color: #e0e0e0 !important;
    border-color: #444 !important;
}

/* --- Sidebar / Tabs --- */
body.dark-mode .tabs,
body.dark-mode .tabs a {
    background-color: #1e1e1e !important;
    color: #ccc !important;
}

body.dark-mode .tabs a.active,
body.dark-mode .tabs a:hover {
    color: #fff !important;
}

/* --- Breadcrumbs --- */
body.dark-mode .breadcrumbs,
body.dark-mode .breadcrumbs a {
    color: #aaa !important;
}

/* --- Comment section --- */
body.dark-mode .comment-box,
body.dark-mode .comments-area {
    background-color: #1e1e1e !important;
    border-color: #333 !important;
}

/* --- Article body --- */
body.dark-mode article,
body.dark-mode .single-article-area {
    background-color: #1e1e1e !important;
    color: #ddd !important;
}

/* --- Dropdown menus (non-navbar) --- */
body.dark-mode .dropdown-menu {
    background-color: #2a2a2a !important;
    border-color: #444 !important;
}

body.dark-mode .dropdown-menu > li > a {
    color: #ddd !important;
}

body.dark-mode .dropdown-menu > li > a:hover {
    background-color: #333 !important;
}


/* ============================================
   DARK MODE TOGGLE BUTTON
   ============================================ */
.theme-toggle-btn {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #fff;
    font-size: 16px;
    width: 34px;
    height: 34px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-left: 10px;
    flex-shrink: 0;
}

.theme-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.28);
    transform: scale(1.1);
}

.theme-toggle-btn:focus {
    outline: none;
}

/* Icon switching: show moon by default, sun in dark mode */
.theme-toggle-btn .fa-moon-o {
    display: inline-block;
}

.theme-toggle-btn .fa-sun-o {
    display: none;
}

body.dark-mode .theme-toggle-btn .fa-moon-o {
    display: none;
}

body.dark-mode .theme-toggle-btn .fa-sun-o {
    display: inline-block;
    color: #fdd835;
}

body.dark-mode .theme-toggle-btn {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

/* ============================================
   MOBILE RESPONSIVE OVERRIDES
   ============================================ */
@media (max-width: 767px) {
    .theme-toggle-btn {
        width: 30px;
        height: 30px;
        font-size: 14px;
        margin-left: 6px;
    }
}