/* ============================================
   Dark Mode Improvements - Complete Styling
   ============================================ */

/* Theme Toggle Button - On/Off Style with Icons */
.theme-toggle {
    position: relative;
    width: 60px;
    height: 30px;
    background-color: #d1d5db;
    border-radius: 30px;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
    padding: 0;
    overflow: hidden;
    flex-shrink: 0;
    margin-left: 60px !important;
    margin-right: 0 !important;
}

/* The sliding circle */
.theme-toggle::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 24px;
    height: 24px;
    background-color: white;
    border-radius: 50%;
    transition: transform 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    z-index: 3;
}

/* Sun icon - visible in light mode */
.theme-toggle-sun-icon {
    position: absolute;
    right: 7px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    color: #f59e0b;
    z-index: 1;
    opacity: 1;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

/* Moon icon - visible in dark mode */
.theme-toggle-moon-icon {
    position: absolute;
    left: 7px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    color: #ffffff;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

/* Dark mode styles */
[data-theme="dark"] .theme-toggle {
    background-color: #3b82f6;
}

[data-theme="dark"] .theme-toggle::before {
    transform: translateX(30px);
}

[data-theme="dark"] .theme-toggle-sun-icon {
    opacity: 0;
}

[data-theme="dark"] .theme-toggle-moon-icon {
    opacity: 1;
}

.theme-toggle i {
    display: block;
}

/* Mobile Toggle Button Positioning */
#theme-toggle-mobile {
    margin: 16px auto 0 auto !important;
    display: block !important;
}

@media (max-width: 768px) {
    .theme-toggle {
        margin-left: 0 !important;
    }
}

/* ============================================
   Dark Mode - Global Sections
   ============================================ */

/* All Sections Background */
[data-theme="dark"] section {
    background-color: #0f1419 !important;
}

[data-theme="dark"] section#home {
    background: linear-gradient(to bottom right, #0a0e1a, rgba(15, 20, 25, 0.9)) !important;
}

[data-theme="dark"] section.bg-white,
[data-theme="dark"] section#about,
[data-theme="dark"] section#skills,
[data-theme="dark"] section#projects {
    background-color: #0f1419 !important;
}

[data-theme="dark"] section.bg-light-gray,
[data-theme="dark"] section#experience,
[data-theme="dark"] section#education,
[data-theme="dark"] section#articles {
    background-color: #1a1f2e !important;
}

[data-theme="dark"] section#contact {
    background-color: #0a0e1a !important;
}

/* ============================================
   Dark Mode - Typography
   ============================================ */

[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
    color: #e4e6eb !important;
}

[data-theme="dark"] p {
    color: #b0b3b8 !important;
}

[data-theme="dark"] .text-navy {
    color: #e4e6eb !important;
}

[data-theme="dark"] .text-medium-gray,
[data-theme="dark"] .text-gray-600,
[data-theme="dark"] .text-gray-700 {
    color: #b0b3b8 !important;
}

[data-theme="dark"] .text-white {
    color: #e4e6eb !important;
}

[data-theme="dark"] .text-gray-300 {
    color: #b0b3b8 !important;
}

[data-theme="dark"] .text-gray-400 {
    color: #8b8f94 !important;
}

/* ============================================
   Dark Mode - Navigation
   ============================================ */

[data-theme="dark"] #navbar {
    background-color: rgba(26, 31, 46, 0.95) !important;
    border-bottom: 1px solid #2d3748;
}

[data-theme="dark"] #navbar a {
    color: #e4e6eb !important;
}

[data-theme="dark"] #navbar .text-navy {
    color: #e4e6eb !important;
}

[data-theme="dark"] .mobile-menu {
    background-color: #1a1f2e !important;
    border-top: 1px solid #2d3748;
}

[data-theme="dark"] .mobile-menu .bg-white {
    background-color: #1a1f2e !important;
}

[data-theme="dark"] .mobile-menu a {
    color: #e4e6eb !important;
}

/* ============================================
   Dark Mode - Cards & Containers
   ============================================ */

[data-theme="dark"] .bg-white {
    background-color: #1a1f2e !important;
}

[data-theme="dark"] .bg-light-gray {
    background-color: #1a1f2e !important;
}

[data-theme="dark"] .bg-navy {
    background-color: #0a0e1a !important;
}

/* Timeline Cards */
[data-theme="dark"] .timeline-card {
    background-color: #1a1f2e !important;
    border-left-color: #0066ff;
}

/* Project Cards */
[data-theme="dark"] .project-card {
    background-color: #1a1f2e !important;
    border: 1px solid #2d3748;
}

/* Article Cards */
[data-theme="dark"] .article-card {
    background-color: #1a1f2e !important;
    border: 1px solid #2d3748;
}

[data-theme="dark"] .article-card:hover {
    border-color: #0066ff;
}

/* Education Cards */
[data-theme="dark"] #education .bg-white {
    background-color: #1a1f2e !important;
}

/* Rounded Containers */
[data-theme="dark"] .rounded-lg,
[data-theme="dark"] .rounded-xl {
    background-color: #1a1f2e;
    border: 1px solid #2d3748;
}

/* Shadow Boxes */
[data-theme="dark"] .shadow-lg,
[data-theme="dark"] .shadow-xl {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}

/* ============================================
   Dark Mode - Forms & Inputs
   ============================================ */

[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] textarea,
[data-theme="dark"] select {
    background-color: #0f1419 !important;
    color: #e4e6eb !important;
    border-color: #2d3748 !important;
}

[data-theme="dark"] input[type="text"]:focus,
[data-theme="dark"] input[type="email"]:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus {
    background-color: #1a1f2e !important;
    border-color: #0066ff !important;
}

[data-theme="dark"] input[type="text"]::placeholder,
[data-theme="dark"] input[type="email"]::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: #6c757d !important;
}

[data-theme="dark"] label {
    color: #e4e6eb !important;
}

/* Contact Form */
[data-theme="dark"] #contactForm .bg-white {
    background-color: #1a1f2e !important;
}

[data-theme="dark"] #contactForm h3 {
    color: #e4e6eb !important;
}

[data-theme="dark"] #contactForm label {
    color: #e4e6eb !important;
}

/* ============================================
   Dark Mode - Buttons
   ============================================ */

[data-theme="dark"] .btn-primary {
    background-color: #0066ff;
    color: white;
}

[data-theme="dark"] .btn-primary:hover {
    background-color: #0052cc;
}

[data-theme="dark"] .btn-secondary {
    background-color: #2d3748;
    color: #e4e6eb;
    border: 1px solid #4a5568;
}

[data-theme="dark"] .btn-secondary:hover {
    background-color: #4a5568;
}

[data-theme="dark"] button {
    color: inherit;
}

/* ============================================
   Dark Mode - Borders & Dividers
   ============================================ */

[data-theme="dark"] .border,
[data-theme="dark"] .border-t,
[data-theme="dark"] .border-b,
[data-theme="dark"] .border-l,
[data-theme="dark"] .border-r {
    border-color: #2d3748 !important;
}

[data-theme="dark"] .border-gray-300,
[data-theme="dark"] .border-gray-200 {
    border-color: #2d3748 !important;
}

[data-theme="dark"] hr {
    border-color: #2d3748;
}

/* ============================================
   Dark Mode - Tags & Badges
   ============================================ */

[data-theme="dark"] .article-category {
    background-color: #2d3748 !important;
    color: #0066ff !important;
}

[data-theme="dark"] .article-tag {
    background-color: #2d3748 !important;
    color: #b0b3b8 !important;
}

[data-theme="dark"] .article-tag:hover {
    background-color: #0066ff !important;
    color: white !important;
}

[data-theme="dark"] .tech-tag {
    background: linear-gradient(135deg, #0066ff, #0052cc);
    color: white;
}

/* ============================================
   Dark Mode - Footer
   ============================================ */

[data-theme="dark"] footer {
    background-color: #0a0e1a !important;
    border-top: 1px solid #2d3748;
}

[data-theme="dark"] footer p,
[data-theme="dark"] footer span {
    color: #b0b3b8 !important;
}

[data-theme="dark"] footer a {
    color: #8b8f94 !important;
}

[data-theme="dark"] footer a:hover {
    color: #0066ff !important;
}

/* ============================================
   Dark Mode - Special Elements
   ============================================ */

/* Back to Top Button */
[data-theme="dark"] #backToTop {
    background-color: #0066ff;
    color: white;
}

[data-theme="dark"] #backToTop:hover {
    background-color: #0052cc;
}

/* Section Underline */
[data-theme="dark"] .section-underline {
    background: linear-gradient(90deg, #0066ff, #ffc107);
}

/* Skill Progress Bars */
[data-theme="dark"] .skill-progress {
    background-color: #2d3748;
}

[data-theme="dark"] .skill-progress-bar {
    background-color: #0066ff;
}

/* Social Links */
[data-theme="dark"] .social-link {
    background-color: rgba(255, 255, 255, 0.05);
    color: #e4e6eb;
}

[data-theme="dark"] .social-link:hover {
    background-color: #0066ff;
    color: white;
}

/* ============================================
   Dark Mode - Contact Section Special
   ============================================ */

[data-theme="dark"] #contact .bg-white\/10 {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

[data-theme="dark"] #contact h2,
[data-theme="dark"] #contact h3,
[data-theme="dark"] #contact h4 {
    color: #e4e6eb !important;
}

/* ============================================
   Dark Mode - Article Content
   ============================================ */

[data-theme="dark"] .article-content {
    color: #b0b3b8;
}

[data-theme="dark"] .article-title {
    color: #e4e6eb !important;
}

[data-theme="dark"] .article-description {
    color: #b0b3b8 !important;
}

[data-theme="dark"] .article-meta {
    color: #8b8f94 !important;
}

[data-theme="dark"] .article-date {
    color: #8b8f94 !important;
}

/* ============================================
   Dark Mode - Responsive Adjustments
   ============================================ */

@media (max-width: 768px) {
    [data-theme="dark"] .mobile-menu {
        background-color: #1a1f2e !important;
    }
    
    [data-theme="dark"] .mobile-nav-link {
        color: #e4e6eb !important;
    }
}

/* ============================================
   Dark Mode - Smooth Transitions
   ============================================ */

[data-theme="dark"] * {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* ============================================
   Dark Mode - Article Detail Page
   ============================================ */

/* Article Page Body */
[data-theme="dark"] body {
    background-color: #0f1419 !important;
    color: #b0b3b8 !important;
}

/* Article Header */
[data-theme="dark"] .article-header {
    background-color: #1a1f2e !important;
}

/* Article Content Container */
[data-theme="dark"] .article-content-container {
    background-color: #1a1f2e !important;
}

/* Article Body Text */
[data-theme="dark"] .article-body {
    color: #b0b3b8 !important;
}

[data-theme="dark"] .article-body h1,
[data-theme="dark"] .article-body h2,
[data-theme="dark"] .article-body h3,
[data-theme="dark"] .article-body h4,
[data-theme="dark"] .article-body h5,
[data-theme="dark"] .article-body h6 {
    color: #e4e6eb !important;
}

[data-theme="dark"] .article-body p {
    color: #b0b3b8 !important;
}

[data-theme="dark"] .article-body a {
    color: #0066ff !important;
}

[data-theme="dark"] .article-body a:hover {
    color: #0052cc !important;
}

/* Code Blocks */
[data-theme="dark"] .article-body pre {
    background-color: #0a0e1a !important;
    border: 1px solid #2d3748;
}

[data-theme="dark"] .article-body code {
    background-color: #0a0e1a !important;
    color: #e4e6eb !important;
}

/* Blockquotes */
[data-theme="dark"] .article-body blockquote {
    background-color: #0a0e1a !important;
    border-left-color: #0066ff !important;
    color: #b0b3b8 !important;
}

/* Lists */
[data-theme="dark"] .article-body ul,
[data-theme="dark"] .article-body ol {
    color: #b0b3b8 !important;
}

[data-theme="dark"] .article-body li {
    color: #b0b3b8 !important;
}

/* Tables */
[data-theme="dark"] .article-body table {
    border-color: #2d3748 !important;
}

[data-theme="dark"] .article-body th {
    background-color: #2d3748 !important;
    color: #e4e6eb !important;
    border-color: #4a5568 !important;
}

[data-theme="dark"] .article-body td {
    background-color: #1a1f2e !important;
    color: #b0b3b8 !important;
    border-color: #2d3748 !important;
}

/* Article Sidebar */
[data-theme="dark"] .article-sidebar {
    background-color: #1a1f2e !important;
}

/* Related Articles */
[data-theme="dark"] .related-articles {
    background-color: #1a1f2e !important;
}

[data-theme="dark"] .related-article-card {
    background-color: #0f1419 !important;
    border: 1px solid #2d3748;
}

[data-theme="dark"] .related-article-card:hover {
    border-color: #0066ff;
    background-color: #1a1f2e !important;
}

/* Author Box */
[data-theme="dark"] .author-box {
    background-color: #1a1f2e !important;
    border: 1px solid #2d3748;
}

/* Share Buttons */
[data-theme="dark"] .share-button {
    background-color: #2d3748 !important;
    color: #e4e6eb !important;
}

[data-theme="dark"] .share-button:hover {
    background-color: #0066ff !important;
    color: white !important;
}

/* Comments Section */
[data-theme="dark"] .comments-section {
    background-color: #1a1f2e !important;
}

[data-theme="dark"] .comment {
    background-color: #0f1419 !important;
    border: 1px solid #2d3748;
}

/* Article Meta Info */
[data-theme="dark"] .article-meta-info {
    color: #8b8f94 !important;
}

/* Reading Progress Bar */
[data-theme="dark"] .reading-progress {
    background-color: #0066ff !important;
}

/* Table of Contents */
[data-theme="dark"] .table-of-contents {
    background-color: #1a1f2e !important;
    border: 1px solid #2d3748;
}

[data-theme="dark"] .table-of-contents a {
    color: #b0b3b8 !important;
}

[data-theme="dark"] .table-of-contents a:hover,
[data-theme="dark"] .table-of-contents a.active {
    color: #0066ff !important;
}