:root {
  --background-color-light: #ffffff;
  --text-color-light: #212529; /* Standard Bootstrap text */
  --card-bg-light: #ffffff;
  --border-color-light: #dee2e6;
  --link-color-light: #007bff;
  --form-control-bg-light: #ffffff;
  --form-control-color-light: #495057;

  --background-color-dark: #22272e; /* Dark GitHub-ish background */
  --text-color-dark: #c9d1d9;     /* Light gray text for dark mode */
  --card-bg-dark: #2d333b;       /* Slightly lighter dark for cards/containers */
  --border-color-dark: #444c56;   /* Darker border */
  --link-color-dark: #58a6ff;     /* Accessible blue for dark mode */
  --form-control-bg-dark: #22272e;
  --form-control-color-dark: #c9d1d9;
}

body {
  background-color: var(--background-color-light);
  color: var(--text-color-light);
  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

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

/* General element styling for dark mode */
body.dark-mode a {
  color: var(--link-color-dark);
}

body.dark-mode .feed-content {
    background-color: var(--background-color-dark); /* Ensure main feed area is dark */
}

body.dark-mode .card, 
body.dark-mode .modal-content,
body.dark-mode .comment,
body.dark-mode .comment-panel,
body.dark-mode li.comment.comment-panel /* Increased specificity */ {
    background-color: var(--card-bg-dark) !important; /* Added !important for testing */
    border: 1px solid var(--border-color-dark) !important; /* Added !important for testing */
    color: var(--text-color-dark) !important; /* Added !important for testing */
    background-image: none !important; /* Remove any background images */
}

body.dark-mode .table {
    color: var(--text-color-dark);
}
body.dark-mode .table th, body.dark-mode .table td, body.dark-mode .table thead th {
    border-color: var(--border-color-dark);
}
body.dark-mode .table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.02); /* Very subtle striping */
}


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

body.dark-mode .form-control::placeholder {
    color: #8b949e; /* Lighter placeholder for dark inputs */
}

body.dark-mode .btn-primary {
  background-color: var(--link-color-dark);
  border-color: var(--link-color-dark);
  color: var(--background-color-dark); /* Dark text on light blue button */
}
body.dark-mode .btn-primary:hover {
  opacity: 0.9;
}

body.dark-mode .btn-secondary,
body.dark-mode .btn-default {
    background-color: #373e47;
    border-color: #444c56;
    color: var(--text-color-dark);
}
body.dark-mode .btn-secondary:hover,
body.dark-mode .btn-default:hover {
    background-color: #444c56;
}


body.dark-mode .navbar,
body.dark-mode .main-header { /* Assuming .main-header for your navbar */
  background-color: var(--card-bg-dark) !important;
  border-bottom: 1px solid var(--border-color-dark) !important;
}

body.dark-mode .navbar .navbar-brand,
body.dark-mode .navbar .nav-link,
body.dark-mode .main-header .navbar-brand, /* for _NavbarHeader */
body.dark-mode .main-header .nav-link {
  color: var(--text-color-dark) !important;
}
body.dark-mode .navbar .nav-link:hover,
body.dark-mode .main-header .nav-link:hover {
  color: var(--link-color-dark) !important;
}


/* --- Theme Toggle Switch Styles --- */
.theme-switch-wrapper {
  display: flex;
  align-items: center;
  gap: 8px; /* Space for icon/text if added */
}

.theme-switch {
  position: relative;
  display: inline-block;
  width: 40px;  /* Smaller toggle */
  height: 20px; /* Smaller toggle */
}

.theme-switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider-toggle {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
  border-radius: 20px; /* To match height */
}

.slider-toggle:before {
  position: absolute;
  content: "";
  height: 14px; /* Smaller circle */
  width: 14px;  /* Smaller circle */
  left: 3px;    /* Adjust position */
  bottom: 3px;  /* Adjust position */
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}

input:checked + .slider-toggle {
  background-color: var(--link-color-light); /* Blue when on (dark mode active) */
}

body.dark-mode input:checked + .slider-toggle {
  background-color: var(--link-color-dark);
}


input:focus + .slider-toggle {
  box-shadow: 0 0 1px var(--link-color-light);
}
body.dark-mode input:focus + .slider-toggle {
  box-shadow: 0 0 1px var(--link-color-dark);
}

input:checked + .slider-toggle:before {
  transform: translateX(20px); /* width - height_of_circle - 2*left_offset */
}

/* Also, let's ensure the text within the comment panels, like links or specific text elements,
   inherits the dark mode text color or has it set explicitly if needed. */
body.dark-mode .comment .content, /* Assuming comment text is in a .content div */
body.dark-mode .comment-panel .content,
body.dark-mode .comment a,
body.dark-mode .comment-panel a {
    color: var(--text-color-dark); /* Or var(--link-color-dark) for links */
}

body.dark-mode .comment a:hover,
body.dark-mode .comment-panel a:hover {
    color: var(--link-color-dark); /* Or a slightly lighter version for hover */
}

/* If there are specific header/footer sections within comments, target them too */
body.dark-mode .comment-header,
body.dark-mode .comment-footer {
    background-color: transparent; /* or var(--card-bg-dark) if they have distinct backgrounds */
    color: var(--text-color-dark);
    border-bottom: 1px solid var(--border-color-dark); /* if applicable */
    border-top: 1px solid var(--border-color-dark); /* if applicable */
}

body.dark-mode .main-comment {
    background-color: var(--card-bg-dark) !important; /* Override the #fff from jquery-comments */
    color: var(--text-color-dark) !important; /* Ensure text color is also dark-mode compliant */
}

/* --- Left and Right Menu Styling --- */
body.dark-mode .left-content,
body.dark-mode .right-content {
    background-color: var(--card-bg-dark); /* Or --background-color-dark if you want it to match the body */
    color: var(--text-color-dark);
}

/* Adjust borders as needed - you might only have one or the other */
body.dark-mode .left-content {
    border-right: 1px solid var(--border-color-dark);
}
body.dark-mode .right-content {
    border-left: 1px solid var(--border-color-dark);
}


body.dark-mode .left-content h4,
body.dark-mode .right-content h4 {
    color: var(--text-color-dark);
    border-bottom: 1px solid var(--border-color-dark); /* Optional: if headings have underlines */
}

body.dark-mode .left-content a,
body.dark-mode .right-content #group-list-items a, /* More specific for dynamic right menu items */
body.dark-mode .right-content .btn-link /* For the logout button if it's styled as a link */ {
    color: var(--text-color-dark); /* Default link color in menus */
}

body.dark-mode .left-content a:hover,
body.dark-mode .right-content #group-list-items a:hover,
body.dark-mode .right-content .btn-link:hover {
    color: var(--link-color-dark); /* Brighter link color on hover */
    background-color: rgba(255, 255, 255, 0.05); /* Subtle hover background */
}

/* Specific for highlighted/active items in left menu if any (e.g., the red "Holidays" background) */
/* You might need to adjust selectors if you have an .active class or similar */
body.dark-mode .left-content .group-content div[style*="background-color:#a12c2c"] {
    background-color: #a12c2c !important; /* Darker red for dark mode, or use a CSS variable */
    color: var(--text-color-dark) !important;
}

/* Style for the scrollbars if they are custom styled and look out of place */
/* This is a general approach, actual scrollbar styling is browser-dependent and complex */
body.dark-mode .scrollbar-left-side_menu::-webkit-scrollbar-thumb,
body.dark-mode .scrollbar::-webkit-scrollbar-thumb { /* For #group-list */
    background: #555;
}
body.dark-mode .scrollbar-left-side_menu::-webkit-scrollbar-track,
body.dark-mode .scrollbar::-webkit-scrollbar-track {
    background: var(--card-bg-dark);
}

/* Logout button in right menu - it's a form button */
body.dark-mode #logoutForm .btn-link {
    color: var(--text-color-dark);
    border-color: var(--border-color-dark);
}
body.dark-mode #logoutForm .btn-link:hover {
    color: var(--link-color-dark);
    background-color: rgba(255, 255, 255, 0.05);
}

/* --- Groups/Details Page Styling - Refinement --- */

/* Attempt to set background for the main body-content wrapper from _PrimaryLayout.cshtml */
body.dark-mode .body-content {
     background-color: var(--background-color-dark) !important;
}
/* If Details.cshtml's own <div class="container"> is the issue for background */
body.dark-mode div.group-container-cover + .container { /* Targets .container immediately after .group-container-cover */
    background-color: var(--background-color-dark) !important;
}

/* Override styles from the <style> block in Details.cshtml */
body.dark-mode .group-detail {
    background-color: var(--background-color-dark) !important; /* from #fff */
}

body.dark-mode .badge {
    color: var(--text-color-dark) !important; /* from #000000 */
    background-color: var(--card-bg-dark) !important; /* from #eeeeee */
    border: 1px solid var(--border-color-dark); /* Add a border for better definition */
}

/* Group cover - let's assume for now the blue color is intentional brand color,
   but ensure text on it is light. If the blue needs to change, we'll adjust background-color. */
body.dark-mode .group-container-cover {
    background: #2d333b;  /* Example: A slightly different blue for dark mode if needed */
    color: #e0e0e0 !important; /* Ensure text is light and readable, from #fff */
}
body.dark-mode .group-container-cover .group-name,
body.dark-mode .group-container-cover .description {
    color: #ffffff !important; /* Explicitly white for titles on the cover */
}


body.dark-mode .img-group-thumbnail {
    border: 10px solid var(--border-color-dark) !important; /* from rgba(255,255,255,0.3) */
}

body.dark-mode .img-follower-group-thumbnail {
    border: 10px solid var(--border-color-dark) !important; /* from #d2d2d2 */
}

body.dark-mode .group-header-footer {
    background-color: var(--card-bg-dark) !important; /* from white */
    color: var(--text-color-light-muted) !important; /* from #ADADAD, using a muted light text */
    border-top: 1px solid var(--border-color-dark);
    border-bottom: 1px solid var(--border-color-dark);
}

/* Panel styling (e.g., .panel.panel-white.panel-friends) - Increased specificity */
body.dark-mode .panel.panel-white.panel-friends {
    background-color: var(--card-bg-dark) !important;
    border: 1px solid var(--border-color-dark) !important;
    color: var(--text-color-dark) !important;
}

body.dark-mode .panel.panel-white.panel-friends .panel-heading {
    background-color: var(--background-color-dark) !important; /* Slightly darker than card for header */
    border-bottom: 1px solid var(--border-color-dark) !important;
    color: var(--text-color-dark) !important;
}

body.dark-mode .panel.panel-white.panel-friends .panel-heading .panel-title {
    color: var(--text-color-dark) !important;
}

body.dark-mode .panel.panel-white.panel-friends .panel-body {
    /* background-color: var(--card-bg-dark) !important; - already handled by .panel-white */
    color: var(--text-color-dark) !important;
}


/* Follow/Unfollow buttons and other .btn-default */
body.dark-mode .group-container-cover .btn-default.btn-transparent {
    color: #e0e0e0 !important; /* Text color for buttons on the blue cover */
    border-color: rgba(255, 255, 255, 0.5) !important;
    background-color: transparent !important;
}
body.dark-mode .group-container-cover .btn-default.btn-transparent:hover {
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.8) !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
}
body.dark-mode .group-container-cover .btn-default.btn-transparent.active {
    color: #ffffff !important;
    border-color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.2) !important;
}


/* Send Request input group within this specific panel - Increased specificity */
body.dark-mode .panel.panel-white.panel-friends .input-group input.form-control {
    background-color: var(--background-color-dark) !important;
    color: var(--text-color-dark) !important;
    border-color: var(--border-color-dark) !important;
}
body.dark-mode .panel.panel-white.panel-friends .input-group input.form-control::placeholder {
    color: var(--text-color-light-muted);
}
body.dark-mode .panel.panel-white.panel-friends .input-group .input-group-btn button.btn.btn-default {
    background-color: var(--background-color-dark) !important;
    color: var(--text-color-dark) !important;
    border-color: var(--border-color-dark) !important;
}
body.dark-mode .panel.panel-white.panel-friends .input-group .input-group-btn button.btn.btn-default:hover {
    background-color: var(--border-color-dark) !important; /* Darken on hover */
}

/* Tabs - Re-asserting with !important on background for links */
body.dark-mode .nav-tabs {
    border-bottom-color: var(--border-color-dark) !important;
}
body.dark-mode .nav-tabs > li > a {
    color: var(--text-color-light-muted) !important;
    background-color: transparent !important; /* Ensure no light bg inherited */
    border-color: transparent !important;
}
body.dark-mode .nav-tabs > li > a:hover {
    color: var(--link-color-dark) !important;
    background-color: var(--background-color-dark) !important;
    border-color: var(--border-color-dark) !important;
    border-bottom-color: transparent !important;
}
body.dark-mode .nav-tabs > li.active > a,
body.dark-mode .nav-tabs > li.active > a:hover,
body.dark-mode .nav-tabs > li.active > a:focus {
    color: var(--link-color-dark) !important;
    background-color: var(--card-bg-dark) !important; /* Active tab bg */
    border: 1px solid var(--border-color-dark) !important;
    border-bottom-color: transparent !important;
}

body.dark-mode .tab-content {
    background-color: var(--card-bg-dark) !important; /* Tab content area bg */
    /*padding: 15px;*/ /* Add some padding if not already there */
    border: 1px solid var(--border-color-dark) !important;
    border-top: none !important;
    color: var(--text-color-dark) !important;
}

/* Ensure any direct children of tab-pane that might have their own backgrounds are handled */
body.dark-mode .tab-pane {
    background-color: transparent !important; /* Make tab panes transparent */
    color: var(--text-color-dark) !important;
}

/* Specific for group comments container if it's different from main comments */
body.dark-mode #group-comments-container .main-comment {
     background-color: var(--card-bg-dark) !important;
     color: var(--text-color-dark) !important;
}

/* jquery-comments input field styling */
body.dark-mode div.jquery-comments div.commenting-field div.textarea {
    background-color: var(--background-color-dark) !important;
    color: var(--text-color-dark) !important;
    border: 1px solid var(--border-color-dark) !important;
}
body.dark-mode div.jquery-comments div.commenting-field div.textarea[placeholder]:before { /* For placeholder text */
    color: var(--text-color-light-muted) !important;
}
/* Buttons within jquery-comments, e.g., "POST" button */
body.dark-mode div.jquery-comments div.commenting-field div.actions button {
    background-color: var(--link-color-dark) !important;
    color: var(--background-color-dark) !important; /* Dark text on light blue button */
    border: 1px solid var(--link-color-dark) !important;
}
body.dark-mode div.jquery-comments div.commenting-field div.actions button:hover {
    opacity: 0.8 !important;
}