/* Basic Theme Setup */
body.light {
  background-color: #ffffff;
  color: #111;
}

body.dark {
  background-color: #121212;
  color: #f5f5f5;
}

/* Toggle Styles */
.theme-toggle {
  position: fixed;
  top: 15px;
  right: 15px;
  z-index: 1000;
}

.toggle-label {
  width: 50px;
  height: 24px;
  background-color: #ffffff;
  display: block;
  border-radius: 24px;
  position: relative;
  cursor: pointer;
  transition: background-color 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px;
  box-sizing: border-box;
}

.toggle-label .toggle-ball {
  width: 18px;
  height: 18px;
  background-color: orange;
  border-radius: 50%;
  position: absolute;
  top: 2.5px;
  left: 2.5px;
  transition: transform 0.3s ease;
  z-index: 1;
}

/* Hide checkbox */
#toggle-theme {
  display: none;
}

/* When checked - dark mode */
#toggle-theme:checked + .toggle-label {
  background-color: #000000;
}

#toggle-theme:checked + .toggle-label .toggle-ball {
  transform: translateX(26px);
}

/* Icons */
.icon {
  font-size: 12px;
  z-index: 2;
}
.sun{
  color: black;
  font-size: 15px;
}
.moon{
  color: white;
  font-size: 16px;
}

/* ============================================================
   DARK MODE — Bottom Navigation
=============================================================== */
body.dark nav.bottom-nav {
  background:linear-gradient(to right, #2575fc, #6a11cb);
  border-top: 1px solid #ffffff;
}

body.dark nav.bottom-nav a i {
  color: black;
}

body.dark nav.bottom-nav a i:hover {
  color: #fff;
}

/* Big center icon (i1) in dark mode */
body.dark nav.bottom-nav a i1 {
  background: #121212;
  color: #bb86fc;
  border: 5px solid #121212;
}

/* Optional hover (if needed) */
body.dark nav.bottom-nav a1:hover {
  color: #e0e0e0;
}

/* Profile picture with white border for contrast */
body.dark .bottom-profile-pic {
  border: 2px solid #000000;
}

/* Dark Mode Styles */
body.dark .article-card {
  background: #1e1e1e;
  color: #fff;
}

body.dark .article-card h2 {
  color: #ffffff;
}

body.dark .comment-count {
  background: #333;
  color: #fff;
}

body.dark {
  background: #121212;
  color: #e0e0e0;
}

/* =================== DARK MODE =================== */

body.dark {
  background-color: #121212;
  color: #e0e0e0;
}

body.dark header.view-header {
  background: linear-gradient(to right, #2575fc, #6a11cb);
  color: #fff;
}

body.dark .view-header .back-btn {
  color: #fff;
}

body.dark #article-details {
  background-color: #1e1e1e;
  box-shadow: 0 0 15px rgba(0,0,0,0.6);
}

body.dark #article-details .head h2,
body.dark #article-details .head h3.subtitle,
body.dark #article-details .article-meta-info,
body.dark .article-content p,
body.dark .article-content h4,
body.dark .article-content h5,
body.dark .article-content h6 {
  color: #f0f0f0;
}

body.dark .article-content h6 {
  color: #f0f345;
}

body.dark .article-content a {
  color: #82b1ff;
}

body.dark .article-links {
  border-top: 1px solid #ffffff;
}

body.dark .article-links a {
  color: #ffffff;
}

body.dark .article-links a:hover {
  color: #bb86fc;
}

body.dark .share-section #shareBtn {
  background-color: #7c4dff;
  color: #ffffff;
}

body.dark .share-section #shareBtn:hover {
  background-color: #9575cd;
}

/* Comments Section */
body.dark #comments-section {
  background-color: #1e1e1e;
  border-color: #444;
}

body.dark #comments-section h3 {
  color: #f0f0f0;
}

body.dark .comment {
  border-bottom: 1px solid #333;
}

body.dark .comment .comment-meta strong {
  color: #e0e0e0;
}

body.dark .comment .comment-meta span {
  color: #aaa;
}

body.dark .comment p {
  color: #ccc;
}

body.dark .delete-icon {
  color: #ff6b6b;
}

/* Comment Form */
body.dark #commentForm input[type="text"] {
  background-color: #2c2c2c;
  color: #f0f0f0;
  border-color: #555;
}

body.dark #commentForm input[type="text"]:focus {
  border-color: #6a11cb;
}

body.dark #commentForm button[type="submit"] {
  background-color: #6a11cb;
}

body.dark #commentForm button[type="submit"]:hover {
  background-color: #9b59b6;
}


 /* ======================================================================
     Dark Mode Adjustments (Add these to your darkmode.css or within media query)
     ====================================================================== */
     body.dark .profile-section,
     body.dark .follow-stats-section,
     body.dark .edit-form,
     body.dark .follow-list,
     body.dark .article-card .menu-dropdown {
       background-color: #333; /* Dark background */
       color: #eee; /* Light text */
       border-color: #9755dd !important; /* Darker borders */
     }
     body.dark .profile-pic { border-color: #444; }
     body.dark .spinner-overlay { background-color: rgba(0, 0, 0, 0.7); }
     body.dark .spinner { border-left-color: #47aeff; }
     body.dark .profile-info .small-text { color: #aaa; }
     body.dark .profile-info .social-links a { color: #bbb; }
     body.dark .edit-form { background-color: #2b2b2b; border-color: #555; }
     body.dark .edit-form input, body.dark .edit-form textarea { background-color: #444; border-color: #666; color: #eee; }
     body.dark .edit-form small { color: #aaa; }
     body.dark .follow-stats-section { border-color: #444; }
     body.dark .follow-btn {  color: #bbb; }
     body.dark .follow-btn:hover { background-color: #444; }
     body.dark .follow-btn span { color: #eee; }
     body.dark .follow-list { background-color: #2b2b2b; border-color: #555; }
     body.dark .follow-list h4 { border-bottom-color: #555; }
     body.dark .follow-list-item { border-bottom-color: #444; }
     body.dark .follow-list-item a { color: #ccc; }

     body.dark .profile-section .profile-info h2,
     body.dark .edit-form label,
     body.dark .follow-stats-section .follow-btn span.count,
     body.dark .follow-list-item a,
     body.dark .article-card .card-body h4,
     body.dark .article-card .menu-dropdown .menu-btn {
         color: #eee; /* Light text for headings/links */
     }
     
     body.dark .profile-section .profile-info p,
     body.dark .profile-section .profile-info .small-text,
     body.dark .follow-stats-section .follow-btn,
     body.dark .edit-form small,
     body.dark .article-card .card-meta,
     body.dark .article-card .menu-dropdown .menu-btn i {
         color: #bbb; /* Muted light text */
     }
     
     body.dark .profile-section .social-links a,
     body.dark .profile-section .btn.edit {
         color: #9b5fe9; /* Adjust primary for dark mode */
     }
     body.dark .profile-section .social-links a:hover,
     body.dark .profile-section .btn.edit:hover {
          color: #99ccff; /* Lighter hover */
     }
     body.dark .follow-btn { color: #bbb; }
     body.dark .follow-btn:hover { background-color: #444; }
     body.dark .follow-btn span { color: #eee; }
     /* --- Dark Mode Adjustments --- */
body.dark .profile-page-actions .btn {
  box-shadow: 0 2px 5px #ffffff14; /* Lighter shadow */
}

body.dark .profile-page-actions .btn:hover {
  box-shadow: 0 4px 8px rgba(255, 255, 255, 0.12);
}

body.dark .profile-page-actions .btn.edit {
 background-color: var(--primary-dark-color, #4aa7e8); /* Lighter primary for dark */
 color: #ffffff; /* Dark text on light background */
}
body.dark .profile-page-actions .btn.edit:hover {
 background-color: #5bc0ff;
}
     body.dark .edit-form input,
     body.dark .edit-form textarea {
         background-color: #444;
         border-color: #666;
         color: #eee;
     }
     body.dark .edit-form input:focus,
     body.dark .edit-form textarea:focus {
          border-color: #77aaff; /* Focus color */
          box-shadow: 0 0 0 0.2rem rgba(119, 170, 255, 0.25);
     }
     
     body.dark .edit-form .btn.cancel {
         background-color: #555;
         color: #eee;
         border-color: #777;
     }
     body.dark .edit-form .btn.cancel:hover {
         background-color: #666;
     }
     
     body.dark .follow-stats-section .follow-btn:hover,
     body.dark .follow-list,
     body.dark .article-card .menu-dropdown .menu-btn:hover {
         background-color: #444;
     }
     body.dark .follow-list h4 { border-bottom-color: #555; }
     body.dark .follow-list-item { border-bottom-color: #444; }
     
     body.dark .article-card .card-meta { border-top-color: #444; }
     body.dark .article-card .menu-dropdown hr { border-top-color: #555; }
     body.dark .article-card .menu-toggle-btn { background: rgba(255, 255, 255, 0.2); color: #333; }
     body.dark .article-card .menu-toggle-btn:hover { background: rgba(255, 255, 255, 0.4); }
     
     /* Dark Skeleton */
     body.dark .skeleton .skeleton-img,
     body.dark .skeleton .skeleton-text {
         background: linear-gradient(90deg, #444 25%, #555 50%, #444 75%);
         background-size: 200% 100%;
         animation: pulse-bg 1.5s infinite ease-in-out;
     }
     body.dark .article-card.skeleton {
         background-color: #333;
     }

     /* Dark Mode Gradient */
body.dark .share-content {
  background: linear-gradient(135deg, #4e4376, #2b2d42, #1a1a2e, #2b2d42); /* Darker gradient */
  color: #eee;
  background-size: 400% 400%;
  animation: gradientBG 18s ease infinite;
}
/* Dark mode Close Button */
body.dark .close-share-btn {
  color: rgba(200, 200, 200, 0.7);
}
body.dark .close-share-btn:hover {
  color: #eee;
}
body.dark #profileLinkText {
  color: rgba(200, 200, 200, 0.85);
}

/* Dark Mode Copy Button */
body.dark #copyLinkBtn {
  background-color: rgba(0, 0, 0, 0.2);
  border-color: rgba(255, 255, 255, 0.2);
  color: #eee;
}
body.dark #copyLinkBtn:hover {
  background-color: rgba(0, 0, 0, 0.35);
}

/* Dark mode hover */
body.dark button#nativeShareBtn {
  color: rgba(200, 200, 200, 0.85); /* Match dark mode base color */
}
body.dark button#nativeShareBtn:hover {
 color: #eee;
}

/* Dark Mode Social Icons */
body.dark .social-share-options a:hover,
body.dark .social-share-options button#nativeShareBtn:hover {
    color: #9638d4; /* Base light hover color for dark mode */
}
body.dark .social-share-options button#nativeShareBtn:hover {
    color: #9638d4; /* Example: Very light gray */
}
/* ============================================================
   DARK MODE — Upload Page
=============================================================== */

/* Dark Mode for Toolbar */
body.dark #formattingToolbar {
    background-color: var(--card-bg-dark, #2c2c2c);
    border-color: var(--border-color-dark, #444);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
 body.dark #formattingToolbar button {
     color: var(--text-secondary-dark, #aaa);
 }
 body.dark #formattingToolbar button:hover:not(:disabled) {
     background-color: var(--bg-secondary-dark, #3a3a3a);
      color: var(--primary-color, #3498db); /* Highlight color can be same or adjusted */
 }
 body.dark #formattingToolbar button:active:not(:disabled) {
     background-color: var(--bg-tertiary-dark, #4a4a4a);
 }
  body.dark #formattingToolbar button.color-red { color: #ff7b72; } /* Lighter for dark mode */
  body.dark #formattingToolbar button.color-green { color: #58d683; }
  body.dark #formattingToolbar button.color-blue { color: #5dade2; }
  body.dark #formattingToolbar button.active {
      background-color: var(--bg-secondary-dark, #3a3a3a);
      color: var(--primary-color, #3498db);
  }
  

/* Dark Mode Adjustments (Optional but recommended) */
body.dark .app-notification { background-color: #eee; color: #333; box-shadow: 0 2px 10px rgba(255, 255, 255, 0.1); }
body.dark .app-notification.success { background-color: #66bb6a; color: #000; }
body.dark .app-notification.error { background-color: #ef5350; color: #fff; }
body.dark .app-notification.info { background-color: #42a5f5; color: #000; }
body.dark .app-notification.warning { background-color: #ffa726; color: #000; }
body.dark .notification-close-btn { color: #555; }