/* frontend/css/dark-mode.css */
body {
  background-color: #121212; /* Dark background */
  color: #eee;
}

header {
  background-color: #1e1e1e;
}

nav a,
nav button {
  color: #eee;
  background-color: #333;
  border-color: #555;
}

nav a:hover,
nav button:hover {
  background-color: #444;
}

.post {
  background-color: #2c2c2c;
  border-color: #444;
  box-shadow: 0 2px 4px rgba(255, 255, 255, 0.1); /* Lighter shadow for dark mode */
}

.post h2 {
  color: #eee;
}

button[type="submit"] {
  background-color: #04AA6D;
}

button[type='submit']:hover {
  background-color: #059862;
}

input[type="text"],
input[type="password"],
textarea {
  background-color: #333;
  color: #fff;
}

/* ----------------------------------- */
/* COMMENTS AND REPLIES STYLES       */
/* ----------------------------------- */

/* Comment Section Header - adjust if needed */
.dark-mode .comments-section h2 {
  color: #eee; /* Lighter heading color */
}

/*  Overall comments section container, adjust as needed */
.dark-mode .comments-section {
  /* border-top: 1px solid #444; -- REMOVED THIS*/
  color: #eee; /* Inherit lighter text color for comment content */
}

/*  Remove default list style */
.dark-mode #comments-list {
  list-style: none;
  padding-left: 0; /* Remove left padding inherited from ul */
}

/*  Style each individual comment-item */
.dark-mode .comment-item {
  border: 1px solid #555;
  background-color: #333;
  color: #eee; /* Lighter color for comment text */
  margin-bottom: 10px; /* add some spacing between each comment item */
  padding: 10px;
  border-radius: 5px; /* Optional: Round the corners */
  position: relative; /* To contain absolute positioned comment numbers */
}

/*Style of comment number*/
.dark-mode .comment-number{
color: #999; /* Adjust the color for dark mode */
position: absolute; /* Positioning the number */
top: 5px;
left: 5px;
font-size: 0.8em;
}

.dark-mode .comments-section li:last-child {
  border-bottom: none;
}

.dark-mode .reply-button {
  background-color: #5a6268;
  color: #fff;  /* Or any other suitable light color */
  border-color: #6c757d;
}

.dark-mode .reply-button:hover {
  background-color: #6c757d;
  border-color: #828a91;
}

.dark-mode .replies-container {
  border-left: 1px solid #555; /* Adjust border color */
  color: #eee; /* Adjust text color */
}

.dark-mode .reply {
  background-color: #444; /* Slightly darker for contrast */
  color: #ddd; /* A bit lighter for readability */
  margin-bottom: 5px; /* Add some spacing between each reply */
  padding: 5px;
  border-radius: 3px;
}

/* Adjust color of ellipsis if it exists */
.dark-mode .overlapped-replies::after {
  background: linear-gradient(to top, rgba(51, 51, 51, 1), rgba(51, 51, 51, 0)); /* Adjust background gradient (using #333) */
  color: #eee; /* Adjust ellipsis color */
}

/* ----------------------------------- */
/* MODALS AND FORMS                */
/* ----------------------------------- */

.dark-mode .modal-content {
  background-color: #2c2c2c;
  color: #eee;   /* Make text white in the dark mode modal */
  box-shadow: 0 2px 4px rgba(255, 255, 255, 0.1); /* Lighter shadow */
}

.dark-mode #comment-text {
  background-color: #333;
  color: #eee;   /* Consistent text color for inputs */
}

.dark-mode .close-button {
  color: rgb(113, 23, 23); /* Or any other color */
}

/* Change the color of post titles on the main page in dark mode */
.dark-mode .post-content h2 a {
  color: #eee; /* A lighter color for dark mode */
}

.dark-mode .post-content h2 a:hover {
  color: #fff; /*Even lighter on hover*/
}

#post-details-container .post .post-content p a {
  color: rgb(234, 234, 25); /* Set the desired yellow color */
}

/* Style usernames in comments (dark mode) */
.dark-mode .comment-item a {
  color: yellow; /* Set to yellow or your desired color */
}

.dark-mode .comment-item a:hover {
  color: lightyellow; /* Lighter yellow on hover for better visibility */
  text-decoration: underline; /* Keep the underline on hover */
}

/* Style usernames in replies (dark mode) */
.dark-mode .reply a {
  color: yellow; /* Set to yellow or your desired color */
}

.dark-mode .reply a:hover {
  color: lightyellow; /* Lighter yellow on hover for better visibility */
  text-decoration: underline; /* Keep the underline on hover */
}