/* Dark Mode Styles for Hindi News Portal */

/* Dark Mode Variables */
[data-theme="dark"] {
    --primary-color: #ff6b6b;
    --secondary-color: #4a6fa5;
    --accent-color: #16213e;
    --text-color: #e0e0e0;
    --bg-color: #121212;
    --light-bg: #1e1e1e;
    --border-color: #333;
    --shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

/* Dark Mode Body */
body.dark-mode {
    background-color: var(--bg-color);
    color: var(--text-color);
}

/* Dark Mode Components */
body.dark-mode .top-bar {
    background: #1e1e1e;
}

body.dark-mode .top-links a {
    color: var(--text-color);
}

body.dark-mode .header {
    background: var(--bg-color);
    border-bottom: 1px solid var(--border-color);
}

body.dark-mode .logo-text {
    color: var(--text-color);
}

body.dark-mode .main-nav .nav-link {
    color: var(--text-color);
}

body.dark-mode .main-nav .nav-link:hover,
body.dark-mode .main-nav .nav-link.active {
    color: var(--primary-color);
}

body.dark-mode .breaking-news {
    background: var(--secondary-color);
}

body.dark-mode .news-card {
    background: var(--light-bg);
    border: 1px solid var(--border-color);
}

body.dark-mode .news-card .card-title {
    color: var(--text-color);
}

body.dark-mode .news-card .card-text {
    color: #bbb;
}

body.dark-mode .news-card .card-footer {
    border-top: 1px solid var(--border-color);
    color: #bbb;
}

body.dark-mode .category-section {
    background: #0f0f0f;
}

body.dark-mode .category-card {
    background: var(--light-bg);
    border: 1px solid var(--border-color);
}

body.dark-mode .trending-item {
    border-bottom: 1px solid var(--border-color);
}

body.dark-mode .trending-content .meta {
    color: #bbb;
}

body.dark-mode .sidebar-widget {
    background: var(--light-bg);
    border: 1px solid var(--border-color);
}

body.dark-mode .sidebar-widget h3 {
    border-bottom: 2px solid var(--border-color);
}

body.dark-mode .footer {
    background: #0a0a0a;
}

body.dark-mode .footer h4::after,
body.dark-mode .footer h5::after {
    background: var(--primary-color);
}

body.dark-mode .footer a {
    color: #bbb;
}

body.dark-mode .footer a:hover {
    color: var(--primary-color);
}

body.dark-mode .footer .border-top {
    border-color: var(--border-color) !important;
}

body.dark-mode .footer .text-muted {
    color: #666 !important;
}

body.dark-mode .share-buttons {
    background: var(--light-bg);
}

body.dark-mode .comment {
    border-bottom: 1px solid var(--border-color);
}

body.dark-mode .comment-content .comment-meta {
    color: #bbb;
}

body.dark-mode .article-content {
    color: var(--text-color);
}

body.dark-mode .article-content h2,
body.dark-mode .article-content h3 {
    color: var(--text-color);
}

body.dark-mode .btn-primary {
    background: var(--primary-color);
    border: none;
}

body.dark-mode .btn-outline-primary {
    color: var(--primary-color);
    border-color: var(--primary-color);
}

body.dark-mode .btn-outline-primary:hover {
    background: var(--primary-color);
    color: white;
}

body.dark-mode .form-control {
    background: var(--light-bg);
    border: 1px solid var(--border-color);
    color: var(--text-color);
}

body.dark-mode .form-control::placeholder {
    color: #888;
}

body.dark-mode .form-control:focus {
    background: var(--light-bg);
    border-color: var(--primary-color);
    color: var(--text-color);
}

body.dark-mode .modal-content {
    background: var(--light-bg);
    border: 1px solid var(--border-color);
}

body.dark-mode .modal-header {
    border-bottom: 1px solid var(--border-color);
}

body.dark-mode .modal-footer {
    border-top: 1px solid var(--border-color);
}

body.dark-mode .offcanvas {
    background: var(--light-bg);
}

body.dark-mode .offcanvas-header {
    background: var(--secondary-color);
}

body.dark-mode .badge {
    background: var(--primary-color);
    color: white;
}

body.dark-mode .dropdown-menu {
    background: var(--light-bg);
    border: 1px solid var(--border-color);
}

body.dark-mode .dropdown-item {
    color: var(--text-color);
}

body.dark-mode .dropdown-item:hover,
body.dark-mode .dropdown-item:focus {
    background: var(--primary-color);
    color: white;
}

body.dark-mode .nav-link {
    color: var(--text-color);
}

body.dark-mode .nav-link:hover,
body.dark-mode .nav-link.active {
    color: var(--primary-color);
}

body.dark-mode .text-muted {
    color: #888 !important;
}

body.dark-mode .skip-link {
    background: var(--primary-color);
}

body.dark-mode .back-to-top {
    background: var(--primary-color);
}

body.dark-mode .pwa-install-btn {
    background: var(--primary-color);
}

/* Dark Mode Toggle Button */
#darkModeToggle {
    cursor: pointer;
    transition: var(--transition);
}

#darkModeToggle:hover {
    transform: rotate(15deg);
}

/* Dark Mode Icons */
body.dark-mode .fa-moon {
    display: none;
}

body.dark-mode .fa-sun {
    display: inline-block;
}

body:not(.dark-mode) .fa-sun {
    display: none;
}

body:not(.dark-mode) .fa-moon {
    display: inline-block;
}

/* Loading Spinner in Dark Mode */
body.dark-mode .spinner {
    border-color: var(--border-color);
    border-top-color: var(--primary-color);
}

/* Dark Mode Animation */
body.dark-mode .fade-in {
    animation: fadeInDark 0.5s ease;
}

@keyframes fadeInDark {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Dark Mode Transition */
body {
    transition: background-color 0.3s ease, color 0.3s ease;
}

body.dark-mode {
    transition: background-color 0.3s ease, color 0.3s ease;
}