/* Only change the background of the body, not the navbar */
body.dark-mode {
    background-color: #111827;
    color: #f3f4f6;
}

/*
   Notice how we only target elements inside specific containers like .post-container,
   .profile-card, etc., instead of general tags like 'form' or 'a'
*/
body.dark-mode .post-container,
body.dark-mode .profile-header,
body.dark-mode .profile-card,
body.dark-mode .action-card,
body.dark-mode .comment-form,
body.dark-mode .original-post-box,
body.dark-mode .post-container form, /* Scoped form */
body.dark-mode .action-context {
    background-color: #1f2937;
    border-color: #374151;
    color: #ffffff;
}

body.dark-mode .post-content,
body.dark-mode .post-content p,
body.dark-mode .post-card-excerpt,
body.dark-mode .comments-list p,
body.dark-mode .repost-notes,
body.dark-mode .action-context p,
body.dark-mode .action-description {
    color: #ffffff !important;
}

body.dark-mode .comments-list strong {
    color: #84cc16 !important;
}

/* Scoped Headers */
body.dark-mode .post-container h1,
body.dark-mode .post-container h2,
body.dark-mode .post-container h3,
body.dark-mode .post-container h4,
body.dark-mode .post-title,
body.dark-mode .profile-username,
body.dark-mode .section-title,
body.dark-mode .action-title,
body.dark-mode .comments-title,
body.dark-mode .profile-post-title,
body.dark-mode .original-title{
    color: #22d3ee;
}

body.dark-mode .post-card-meta .author-name {
    color: #22d3ee;
}

body.dark-mode .page-title {
    color: #22d3ee;
}

body.dark-mode .profile-stats #followers-count,
body.dark-mode .profile-stats #following-count{
    color: #22d3ee;
}

body.dark-mode .post-meta,
body.dark-mode .profile-joined,
body.dark-mode .original-author,
body.dark-mode .action-description,
body.dark-mode .comments-list small,
body.dark-mode .post-card-meta,
body.dark-mode .profile-post-date {
    color: #9ca3af;
}

/* SCOPED LINKS: Only target links inside your specific app containers, NOT the navbar */
body.dark-mode .post-container a,
body.dark-mode .author-link,
body.dark-mode .profile-post-title a,
body.dark-mode .original-title a,
body.dark-mode .post-card-title a {
    color: #22d3ee;
    text-decoration: none;
}

body.dark-mode .post-container a:hover,
body.dark-mode .author-link:hover,
body.dark-mode .profile-post-title a:hover {
    color: #67e8f9;
    text-decoration: underline;
}

/* Buttons */
body.dark-mode .btn-like,
body.dark-mode .btn-repost,
body.dark-mode .btn-edit {
    background-color: #1f2937;
    color: #22d3ee;
    border-color: #22d3ee;
}

body.dark-mode .btn-like:hover,
body.dark-mode .btn-repost:hover {
    background-color: #374151;
}

body.dark-mode .btn-submit,
body.dark-mode .btn-primary {
    background-color: #0891b2;
    border-color: #0891b2;
    color: #ffffff;
}

body.dark-mode .btn-submit:hover,
body.dark-mode .btn-primary:hover {
    background-color: #0e7490;
}

body.dark-mode .btn-delete {
    background-color: #991b1b;
    color: #ffffff;
    border-color: #b91c1c;
}

body.dark-mode .btn-cancel {
    background-color: #374151;
    color: #e5e7eb;
    border-color: #4b5563;
}

/* Scoped Inputs */
body.dark-mode .post-container input[type="text"],
body.dark-mode .post-container input[type="email"],
body.dark-mode .post-container input[type="password"],
body.dark-mode .post-container textarea,
body.dark-mode .comment-input {
    background-color: #111827;
    border-color: #4b5563;
    color: #ffffff;
}

body.dark-mode .post-container input:focus,
body.dark-mode .post-container textarea:focus {
    border-color: #22d3ee;
    box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.2);
}

body.dark-mode .comments-list > div,
body.dark-mode .post-card {
    background-color: #1f2937;
    border-color: #374151;
    border-left-color: #22d3ee;
}

body.dark-mode .post-divider,
body.dark-mode .action-header,
body.dark-mode .section-title {
    border-bottom-color: #374151;
}

body.dark-mode .errorlist {
    background-color: #450a0a;
    color: #fca5a5;
    border-color: #7f1d1d;
}

.theme-btn {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 5px 10px;
    border-radius: 8px;
    transition: all 0.2s;
    color: #0056b3;
}

.theme-btn:hover {
    background-color: rgba(0, 86, 179, 0.1);
}

body.dark-mode .theme-btn {
    color: #22d3ee;
}

body.dark-mode .theme-btn:hover {
    background-color: rgba(34, 211, 238, 0.1);
}

/* Add this to the bottom of your theme.css */

@keyframes theme-spin {
    0% { transform: rotate(0deg) scale(1); opacity: 1; }
    50% { transform: rotate(180deg) scale(0.2); opacity: 0; }
    100% { transform: rotate(360deg) scale(1); opacity: 1; }
}

.theme-animating {
    animation: theme-spin 0.4s ease-in-out;
}

/* =========================================
   CREATE POST PAGE DARK MODE STYLES
   ========================================= */

/* 1. Turn the form box background dark */
body.dark-mode .post-form {
    background-color: #1f2937;
    border-color: #374151;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4); /* Darker shadow for dark mode */
}

/* 2. Turn the "Create Post" H1 and the labels (Title, Content, etc.) to cyan */
body.dark-mode .post-form h1,
body.dark-mode .post-form label {
    color: #22d3ee;
}

/* 3. Turn the input fields and textareas dark */
body.dark-mode .post-form input[type="text"],
body.dark-mode .post-form input[type="email"],
body.dark-mode .post-form input[type="password"],
body.dark-mode .post-form textarea {
    background-color: #111827;
    border-color: #4b5563;
    color: #ffffff;
}

/* 4. Add the cyan glow when you click inside an input box */
body.dark-mode .post-form input[type="text"]:focus,
body.dark-mode .post-form input[type="email"]:focus,
body.dark-mode .post-form input[type="password"]:focus,
body.dark-mode .post-form textarea:focus {
    border-color: #22d3ee;
    box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.2);
    background-color: #111827;
}

/* 5. Update the "Create" submit button to match the dark theme */
body.dark-mode .sub-btn {
    background-color: #0891b2;
    color: #ffffff;
}

body.dark-mode .sub-btn:hover {
    background-color: #0e7490;
}

/* 6. (Optional) Make the checkbox look better in dark mode */
body.dark-mode .post-form input[type="checkbox"] {
    accent-color: #22d3ee;
}

/* =========================================
   REPOST PAGE DARK MODE STYLES
   ========================================= */

/* 1. Turn the main card background dark */
body.dark-mode .action-card {
    background-color: #1f2937;
    border-color: #374151;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}

/* 2. Style the text: Title, context paragraph, and form label ("Content") */
body.dark-mode .action-card .action-title,
body.dark-mode .action-card .action-form label {
    color: #22d3ee; /* The requested cyan color */
}

body.dark-mode .action-card .action-context p {
    color: #d1d5db; /* A light, readable gray for description text */
}

/* 3. Style the textarea/input field to be dark */
body.dark-mode .action-card .action-form textarea,
body.dark-mode .action-card .action-form input[type="text"] {
    background-color: #111827;
    border-color: #4b5563;
    color: #ffffff;
}

/* 4. Add the cyan focus glow when clicking into the textarea */
body.dark-mode .action-card .action-form textarea:focus,
body.dark-mode .action-card .action-form input[type="text"]:focus {
    border-color: #22d3ee;
    box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.2);
}

/* 5. Update the action buttons for dark mode */
/* Share Repost button */
body.dark-mode .action-card .btn-primary {
    background-color: #0891b2;
    color: #ffffff;
    border: 1px solid #0891b2;
}

body.dark-mode .action-card .btn-primary:hover {
    background-color: #0e7490;
}

/* Cancel button */
body.dark-mode .action-card .btn-cancel {
    background-color: transparent;
    color: #9ca3af;
    border: 1px solid #4b5563;
}

body.dark-mode .action-card .btn-cancel:hover {
    background-color: #374151;
    color: #ffffff;
}

/* =========================================
   UPDATE POST PAGE ( .edit ) STYLES
   ========================================= */
/* =========================================
   UPDATE POST PAGE ( .edit ) - DARK MODE COLORS ONLY
   ========================================= */

body.dark-mode .edit {
    background-color: #1f2937;
    border-color: #374151;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}

body.dark-mode .edit h1,
body.dark-mode .edit label {
    color: #22d3ee;
}

body.dark-mode .edit input[type="text"],
body.dark-mode .edit textarea {
    background-color: #111827;
    border-color: #4b5563;
    color: #ffffff;
}

body.dark-mode .edit input[type="text"]:focus,
body.dark-mode .edit textarea:focus {
    border-color: #22d3ee;
    box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.2);
    background-color: #111827;
}

body.dark-mode .edit button[type="submit"] {
    background-color: #0891b2;
    color: #ffffff;
}

body.dark-mode .edit button[type="submit"]:hover {
    background-color: #0e7490;
}