/* ==========================================================================
   1. THEME VARIABLES & BASE SETUP
   ========================================================================== */
:root {
    --bg-light: #F5F2ED;
    --text-light: #3D3D3D;
    --accent-light: #D94C4C;
    --border-light: #8a8783;
    --container-light: #FFFFFF;
    --hover-light: #F8F8F8;
    --meta-light: #7A7A7A;

    --bg-dark: #1A1A1A;
    --text-dark: #EAEAEA;
    --accent-dark: #FF5C5C;
    --border-dark: #444444;
    --container-dark: #1c1c1c;
    --hover-dark: #2c2c2c;
    --meta-dark: #aaa;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: var(--bg-light);
    color: var(--text-light);
    margin: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

a { color: var(--accent-light); text-decoration: none; font-weight: bold; }
a:hover { text-decoration: underline; }
h1 {
    font-size: clamp(1.8rem, 4vw + 1rem, 2.5rem);
    font-weight: bold;
}
h2 {
    font-size: clamp(1.4rem, 3vw + 1rem, 2rem);
    font-weight: bold;
}
h3 {
    font-size: clamp(1.2rem, 2vw + 1rem, 1.5rem);
    font-weight: bold;
}
h4 {
    font-size: clamp(1.1rem, 1vw + 1rem, 1.25rem);
    font-weight: bold;
}
hr { border: none; border-top: 2px solid var(--border-light); margin: 2rem 0; }

/* ==========================================================================
   2. LAYOUT & CORE COMPONENTS
   ========================================================================== */
.page-wrapper { flex: 1 0 auto; }
.container {   
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    background-color: var(--container-light);
    border: 1px solid var(--border-light);
    border-radius: 5px;
}
main.container {
    margin-top: 1.5rem;
    margin-bottom: 1rem;
}
.detail-section { margin-top: 2rem; }

header { background-color: var(--container-light); border-bottom: 1px solid var(--border-light); padding: 1rem 0; }
.navbar { max-width: 800px; margin: 0 auto; padding: 0 20px; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; }
.nav-branding { font-size: 1.5em; color: var(--text-light); }
.nav-links { list-style: none; display: flex; gap: 1.5rem; margin: 0; padding: 0; align-items: center; }

.mobile-only {
    display: none;
}

@media (max-width: 768px) {
    /* ... your other mobile styles ... */

    .navbar {
        /* This ensures the items inside (branding, controls) have space */
        justify-content: space-between;
    }

    /* Hide the main desktop links */
    .nav-links {
        display: none; /* Hide the ul element itself */
    }
    
    /* Create a flex container for the buttons on the right */
    .nav-controls {
        display: flex;
        align-items: center;
        gap: 1rem; /* Add some space between the theme toggle and hamburger */
    }
    /* Hide the desktop-only elements on mobile */
    .desktop-only {
        display: none;
    }
    
    /* Show the mobile-only elements on mobile */
    /* We use 'block' for list items and 'flex' for separators */
    .mobile-only {
        display: block;
    }
    .nav-separator.mobile-only {
        display: flex;
        border-top: 1px solid var(--border-light);
        margin: 1rem 2rem;
        padding: 0;
        height: 0;
    }
    html.dark-mode .nav-separator.mobile-only {
        border-top-color: var(--border-dark);
    }
}

/* ==========================================================================
   3. FORMS & BUTTONS
   ========================================================================== */
.form-group { margin-bottom: 1rem; }
.form-group label { display: block; margin-bottom: 0.5rem; font-weight: bold; }
input, select, textarea {
    width: 100%; padding: 10px; box-sizing: border-box; border: 2px solid var(--border-light);
    border-radius: 4px; background-color: #fff; color: var(--text-light);
}
input[type="submit"], button[type="submit"] {
    border: none; padding: 10px 20px; font-weight: bold; cursor: pointer;
    border-radius: 4px; background-color: var(--accent-light); color: #fff; width: auto;
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-grid-3-col { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
/* --- Custom Checkbox Toggle Switch --- */

/* --- Custom Checkbox Toggle Switch (Final Version) --- */
.form-group .toggle-switch-container {
    display: flex !important; /* Use !important as a last resort to win */
    align-items: center !important;
    gap: 15px;
}

.toggle-container {
    display: flex;
    align-items: center; /* Vertically centers the text and the switch */
}

.toggle-label {
    font-weight: bold;
    margin-right: 15px; /* Space between the text and the switch */
    cursor: pointer;
}

/* The container for the switch */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 28px;
}

/* Hide the default, ugly checkbox */
.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* The slider track */
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 28px;
}

/* The white knob */
.slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 50%;
}

/* --- This is the key logic --- */
/* When the hidden input is checked, its sibling span (the slider) changes */
input:checked + .slider {
    background-color: var(--accent-light);
}

input:checked + .slider:before {
    -webkit-transform: translateX(22px);
    -ms-transform: translateX(22px);
    transform: translateX(22px);
}


/* --- Dark Mode Overrides --- */
html.dark-mode .slider {
    background-color: #555;
}

html.dark-mode input:checked + .slider {
    background-color: var(--accent-dark);
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
  border-radius: 28px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 1px;
  background-color: var(--hover-light);
  -webkit-transition: .4s;
  transition: .4s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: var(--accent-light);
}

input:checked + .slider:before {
  -webkit-transform: translateX(22px);
  -ms-transform: translateX(22px);
  transform: translateX(22px);
}

/* --- Dark Mode Overrides --- */
html.dark-mode .slider {
    background-color: #555;
}
html.dark-mode input:checked + .slider {
    background-color: var(--accent-dark);
}
html.dark-mode .toggle-label {
    color: var(--text-dark);
}

/* ==========================================================================
   4. SPECIFIC COMPONENTS (Lists, Icons, etc.)
   ========================================================================== */
.concert-list-item { display: flex; align-items: center; text-decoration: none; color: inherit; padding: 10px; border-radius: 5px; transition: background-color 0.2s; }
.concert-list-item:hover { background-color: var(--hover-light); }
.concert-date { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 60px; height: 60px; border: 2px solid var(--border-light); border-radius: 5px; margin-right: 1.5rem; flex-shrink: 0; }
.concert-date .month { font-size: 0.8em; font-weight: bold; text-transform: uppercase; }
.concert-date .day { font-size: 1.5em; font-weight: bold; line-height: 1; }
.concert-info small { color: var(--meta-light); }
.concert-primary-info {
    font-weight: bold; /* Make the main line bold */
}

.concert-secondary-info {
    color: var(--meta-light); /* Use the dimmer meta text color */
}

html.dark-mode .concert-secondary-info {
    color: var(--meta-dark);
}
.news-preview-item { padding-bottom: 1.5rem; margin-bottom: 1.5rem; border-bottom: 2px solid var(--border-light); }
.news-preview-item:last-child { border-bottom: none; margin-bottom: 0; }
.news-meta { font-size: 0.9em; color: var(--meta-light); margin-bottom: 0.75rem; }

.detail-list { list-style: none; padding: 0; }
.detail-list li { margin-bottom: 1rem; }
.update-info { margin-top: 2rem; font-size: 0.8em; color: var(--meta-light); text-align: right; }

.profile-icon {
    width: 40px; height: 40px; border-radius: 50%; font-weight: bold; font-size: 1.2rem;
    display: flex; justify-content: center; align-items: center;
}
.notification-dot { position: absolute; top: 0; right: 0; width: 12px; height: 12px; background-color: red; border-radius: 50%; border: 2px solid var(--container-light); }

/* --- SVG Theme Toggle Button Styles --- */

.theme-toggle-button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: inherit; /* Inherit text color, which changes with the theme */
  margin-left: 10px;
}

.theme-toggle-button svg {
  width: 22px;
  height: 22px;
  stroke: currentColor; /* The SVG's lines will match the text color */
  transition: opacity 0.2s ease-in-out;
}

.theme-toggle-button:hover svg {
  opacity: 0.7; /* A subtle hover effect */
}

/* --- The Logic for Switching Icons --- */

/* In light mode (default), hide the sun and show the moon */
#sun-icon {
  display: none;
}
#moon-icon {
  display: block;
}

/* When dark mode is active, show the sun and hide the moon */
html.dark-mode #sun-icon {
  display: block;
}
html.dark-mode #moon-icon {
  display: none;
}
/* A new class for destructive action buttons */
.button-danger {
    border: none;
    padding: 10px 20px;
    font-weight: bold;
    cursor: pointer;
    border-radius: 4px;
    background-color: var(--accent-light); /* Use your red accent color */
    color: #fff;
    width: auto;
}
.button-danger:hover {
    opacity: 0.8;
}
html.dark-mode .button-danger {
    background-color: #c00;
}


/* ==========================================================================
   5. HAMBURGER & MOBILE STYLES
   ========================================================================== */
.hamburger { display: none; cursor: pointer; background: none; border: none; }
.bar { display: block; width: 25px; height: 3px; margin: 5px auto; background-color: var(--text-light); transition: all 0.3s ease-in-out; }

@media (max-width: 768px) {
    .hamburger { display: block; }
    .hamburger.is-active .bar:nth-child(2) { opacity: 0; }
    .hamburger.is-active .bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
    .hamburger.is-active .bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
    .nav-links {
        position: fixed; left: -100%; top: 0; flex-direction: column; background-color: var(--bg-light);
        width: 100%; height: 100vh; text-align: center; transition: 0.3s; z-index: 99; padding-top: 5rem;
    }
    .nav-links .nav-item {
        margin: 1.5rem 0; /* Add more vertical space */
    }
    .nav-links .nav-item a {
        font-size: 1.5rem; /* Make the tap target much larger */
    }
    .nav-links.is-active { left: 0; }
    .form-grid, .form-grid-3-col { grid-template-columns: 1fr; }
    .nav-controls {
        display: flex;
        align-items: center;
        gap: 1rem;
    }

    /* Change the nav-links from a flexbox to its initial hidden state */
    .nav-links {
        display: block; /* Overwrite the desktop 'display: flex' */
        position: fixed;
        left: -100%;
        /* ... rest of your slide-out menu styles ... */
    }
    .nav-links.is-active {
        left: 0;
    }
}


/* ==========================================================================
   X. FLASH MESSAGE ALERTS
   ========================================================================== */

.alert {
    padding: 1rem;
    margin-bottom: 1.5rem;
    border: 1px solid transparent;
    border-radius: 5px;
    font-weight: bold;
}

/* --- Light Mode Colors --- */
.alert-success {
    color: #155724;
    background-color: #d4edda;
    border-color: #c3e6cb;
}
.alert-danger {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
}
.alert-warning {
    color: #856404;
    background-color: #fff3cd;
    border-color: #ffeeba;
}
.alert-info {
    color: #0c5460;
    background-color: #d1ecf1;
    border-color: #bee5eb;
}


/* --- Dark Mode Overrides for Alerts --- */

html.dark-mode .alert-success {
    color: #a3d9b8;
    background-color: #1c2b22;
    border-color: #2a4a37;
}
html.dark-mode .alert-danger {
    color: #f1b0b7;
    background-color: #2f1d1f;
    border-color: #58151c;
}
html.dark-mode .alert-warning {
    color: #ffda6a;
    background-color: #332c1b;
    border-color: #66510d;
}
html.dark-mode .alert-info {
    color: #9eeaf9;
    background-color: #1c2a2e;
    border-color: #2a525e;
}

/* ==========================================================================
   6. DARK MODE
   ========================================================================== */
html.dark-mode { background-color: var(--bg-dark); color: var(--text-dark); }
html.dark-mode body { background-color: var(--bg-dark); }
html.dark-mode a { color: var(--accent-dark); }
html.dark-mode hr { border-top-color: var(--border-dark); }
html.dark-mode h1,
html.dark-mode h2,
html.dark-mode h3,
html.dark-mode h4,
html.dark-mode p {
    color: var(--text-dark);
}
html.dark-mode .nav-controls {
    color: var(--text-dark);
}
/* Dark mode overrides for the new structure */
html.dark-mode header,
html.dark-mode .site-footer {
    background-color: #363636;
}
html.dark-mode .container {
    background-color: var(--container-dark);
}
html.dark-mode .nav-branding { color: var(--text-dark); }
html.dark-mode .bar { background-color: var(--text-dark); }
html.dark-mode .nav-links.is-active { background-color: var(--bg-dark); }
html.dark-mode .notification-dot { border-color: var(--container-dark); }
html.dark-mode input, html.dark-mode select, html.dark-mode textarea { background-color: #222; border-color: var(--border-dark); color: var(--text-dark); }
html.dark-mode input[type="submit"], html.dark-mode button[type="submit"] { background-color: var(--accent-dark); color: var(--bg-dark); }
html.dark-mode .concert-list-item:hover { background-color: var(--hover-dark); }
html.dark-mode .concert-date { border: 2px solid; border-color: var(--border-dark); }
html.dark-mode .news-preview-item { border-bottom-color: var(--border-dark); }
html.dark-mode .news-meta { color: var(--meta-dark); }
html.dark-mode .concert-info small { color: var(--meta-dark); }
html.dark-mode .update-info { color: var(--meta-dark); }
html.dark-mode .form-group label {
    color: var(--text-dark);
}
html.dark-mode .tab-link {
    color: var(--meta-dark); /* Use the dimmer meta text color for inactive tabs */
}
html.dark-mode .tab-link.active {
    color: var(--text-dark); /* Use the main bright text color for the active tab */
    border-bottom-color: var(--accent-dark); /* Use the bright red accent for the underline */
}
html.dark-mode .remove-role-btn {
    color: var(--accent-dark); /* Use the bright red accent */
}
html.dark-mode .actions-button {
    background-color: #777;
}
html.dark-mode .actions-button { background-color: #777; }
html.dark-mode .actions-dropdown { background-color: #2c2c2c; border-color: var(--border-dark); }
html.dark-mode .dropdown-divider { background-color: var(--border-dark); }

html.dark-mode .actions-dropdown .dropdown-button { color: var(--text-dark); }
html.dark-mode .actions-dropdown .dropdown-button:hover { background-color: #444 !important; color: var(--accent-dark) !important; }
html.dark-mode .actions-dropdown .dropdown-button.ban { color: var(--accent-dark); }
html.dark-mode .actions-dropdown .dropdown-button.unban { color: #5cb85c; }
}

html.dark-mode .user-table th {
    color: var(--text-dark); 
}

html.dark-mode .user-table tr {
    color: var(--text-dark);
}
html.dark-mode .dropdown-button.ban { color: var(--accent-dark); }
html.dark-mode .dropdown-button.unban { color: #5cb85c; }
.bar {
    display: block;
    width: 25px;
    height: 3px;
    margin: 5px auto;
    background-color: #333; /* Dark color for light mode */
    transition: all 0.3s ease-in-out;
}
html.dark-mode .bar {
    background-color: #e0e0e0; /* Light color for dark mode */
}

html.dark-mode .profile-dropdown-menu {
    background-color: var(--container-dark); /* Use the dark container background */
    border-color: var(--border-dark);
}

/* Header text inside the dropdown */
html.dark-mode .dropdown-header {
    color: var(--meta-dark); /* Use the dimmer meta text color */
}
html.dark-mode .dropdown-header strong {
    color: var(--text-dark); /* Use the main bright text color */
}

/* The divider line */
html.dark-mode .dropdown-divider {
    background-color: var(--border-dark);
}

/* The clickable links inside the dropdown */
html.dark-mode .dropdown-item {
    color: var(--text-dark); /* Use the main bright text color */
}

/* The hover effect for the links */
html.dark-mode .dropdown-item:hover {
    background-color: var(--hover-dark); /* Use the dark hover color */
    /* The link color will automatically become the accent red via the general 'a:hover' rule */
}
html.dark-mode .search-results-container {
    border-color: var(--border-dark);
    background-color: var(--container-dark);
}

html.dark-mode .search-results-container li a {
    color: var(--text-dark);
    border-bottom-color: var(--border-dark);
}

html.dark-mode .search-results-container li a:hover {
    background-color: var(--hover-dark);
}

html.dark-mode .search-results-container .result-meta {
    color: var(--meta-dark);
}
html.dark-mode li {
    color: var(--text-dark);
}
/* --- Dark Mode Custom Scrollbar --- */
/* This will apply to any scrollable element in dark mode, including the chat box */

/* For WebKit browsers (Chrome, Safari, Edge) */
html.dark-mode ::-webkit-scrollbar {
    width: 12px; /* Width of the scrollbar */
}

html.dark-mode ::-webkit-scrollbar-track {
    background: #2c2c2c; /* The background of the scrollbar track */
    border-radius: 10px;
}

html.dark-mode ::-webkit-scrollbar-thumb {
    background-color: #555; /* The color of the draggable scroll handle */
    border-radius: 10px;
    border: 3px solid #2c2c2c; /* Creates padding around the thumb */
}

html.dark-mode ::-webkit-scrollbar-thumb:hover {
    background-color: #777; /* Make it a bit brighter on hover */
}

/* For Firefox */
/* Firefox supports the modern standard for scrollbar styling */
html.dark-mode .chat-messages,
html.dark-mode .search-results-container { /* You can apply this to any scrollable container */
    scrollbar-width: thin; /* Can be 'auto', 'thin', or 'none' */
    scrollbar-color: #555 #2c2c2c; /* thumb color track color */
}


/* --- Profile Page Styles --- */

.profile-header {
    display: flex;
    flex-direction: column; /* Stack items vertically */
    align-items: center;    /* Center items horizontally */
    text-align: center;     /* Center the text inside the items */
    margin-bottom: 2rem;
}

/* Make the main profile icon larger */
.profile-header .profile-icon {
    width: 120px;
    height: 120px;
    font-size: 4em;
    margin-bottom: 1rem;
}

.profile-header .profile-username {
    font-size: 2em;
    font-weight: bold;
    margin: 0;
}

.profile-header .profile-pronouns {
    font-size: 1.1em;
    color: var(--meta-light);
    margin-top: 0.25rem;
}

.profile-header .profile-roles {
    margin-top: 1rem;
}

.profile-edit-link {
    display: block;
    text-align: center;
    margin-top: 1rem;
}

/* Dark mode override */
html.dark-mode .profile-header .profile-pronouns {
    color: var(--meta-dark);
}

/* --- Admin Dashboard Action Dropdown Styles --- */

.actions-cell { position: relative; overflow: visible; }
.actions-button {
    background-color: #555;
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
}
.actions-dropdown {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    background-color: var(--container-light);
    border: 1px solid var(--border-light);
    border-radius: 5px;
    z-index: 10;
    min-width: 180px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    padding: 5px;
}
.actions-cell:hover .actions-dropdown { display: block; }
.dropdown-divider { height: 1px; margin: 5px 0; background-color: var(--border-light); }
.actions-dropdown form { margin: 0; }

/* Target buttons specifically inside the actions dropdown */
.actions-dropdown .dropdown-button {
    width: 100%;
    padding: 8px 12px;
    border: none;
    background: none !important; /* Force no background by default */
    color: var(--text-light);
    text-align: left;
    cursor: pointer;
    font-weight: bold;
    border-radius: 4px;
}
.actions-dropdown .dropdown-button:hover {
    background-color: var(--hover-light) !important; /* Force background on hover */
    color: var(--accent-light) !important;
}

/* Specific colors for Ban/Unban buttons */
.actions-dropdown .dropdown-button.ban { color: var(--accent-light); }
.actions-dropdown .dropdown-button.unban { color: #5cb85c; }


/* Style for all buttons inside the dropdown */
.dropdown-button {
    width: 100%;
    padding: 8px 12px;
    border: none;
    background: none; /* <-- CRITICAL: No background by default */
    color: var(--text-light);
    text-align: left;
    cursor: pointer;
    font-weight: bold;
    border-radius: 4px; /* Add radius for hover effect */
}
.dropdown-button:hover {
    background-color: var(--hover-light);
    color: var(--accent-light);
}

/* Specific colors for Ban/Unban buttons */
.dropdown-button.ban { color: var(--accent-light); } /* Red text */
.dropdown-button.unban { color: #5cb85c; }       /* Green text */



/* --- Chat Page Styles --- */
.chat-messages {
    list-style: none;
    padding: 1rem;
    margin: 0;
    height: 60vh; /* Make the chat box a fixed height */
    overflow-y: scroll; /* Add a scrollbar if messages overflow */
    border: 2px solid var(--border-light);
    border-radius: 5px;
    margin-bottom: 1rem;
}
.chat-messages li {
    padding: 0.25rem 0;
}
.chat-meta {
    color: var(--meta-light);
    margin-right: 0.5rem;
}
html.dark-mode .chat-messages {
    border-color: var(--border-dark);
}
/* Default user */
.chat-messages .role-user {
    color: #555;
}

/* Band Member */
.chat-messages .role-band-member {
    color: #8e44ad; /* Purple */
}

/* Moderator */
.chat-messages .role-moderator {
    color: #2980b9; /* Blue */
}

/* Admin */
.chat-messages .role-admin {
    color: #f39c12; /* Gold */
}
/* --- Chat User Count Display --- */
.user-count-display {
    padding: 8px 12px;
    border-radius: 5px;
    background-color: var(--hover-light);
    border: 1px solid var(--border-light);
    color: var(--accent-light);
    font-size: 0.9em;
}

html.dark-mode .user-count-display {
    background-color: var(--hover-dark);
    border-color: var(--border-dark);
    color: var(--accent-dark);
}
/* --- Dark Mode Overrides for Chat Usernames --- */

html.dark-mode .chat-messages .role-user {
    color: #bbb; /* A brighter gray for dark mode */
}

html.dark-mode .chat-messages .role-band-member {
    color: #9b59b6; /* Lighter purple */
}

html.dark-mode .chat-messages .role-moderator {
    color: #3498db; /* Lighter blue */
}

html.dark-mode .chat-messages .role-admin {
    color: #f1c40f; /* Lighter gold */
}


/* --- Mobile / Responsive Styles --- */
@media (max-width: 768px) {

    /* Show the hamburger button on mobile */
    .hamburger {
        display: block;
    }

    /* Animate the hamburger to an "X" when active */
    .hamburger.is-active .bar:nth-child(2) { opacity: 0; }
    .hamburger.is-active .bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
    .hamburger.is-active .bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

    /* Style the slide-out navigation menu */
    .nav-links {
        position: fixed;
        left: -100%; /* Start off-screen */
        top: 0;
        flex-direction: column; /* Stack links vertically */
        background-color: #fff;
        width: 100%;
        height: 100vh; /* Full height */
        text-align: center;
        transition: 0.3s;
        z-index: 99; /* High z-index to be on top */
        padding-top: 5rem;
    }

    /* The class that JavaScript will toggle */
    .nav-links.is-active {
        left: 0; /* Slide into view */
    }

    /* Dark mode for the slide-out menu */
    html.dark-mode .nav-links {
        background-color: #1c1c1c;
    }
}
/* --- Profile Dropdown Menu Styles --- */

.profile-dropdown-container {
    position: relative; /* This is the anchor for the menu */
}

.profile-dropdown-menu {
    display: none; /* Hide the menu by default */
    position: absolute;
    top: 100%;
    right: 0;
    background-color: var(--container-light);
    border: 1px solid var(--border-light);
    border-radius: 5px;
    min-width: 220px;
    z-index: 100;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    padding: 0.5rem 0;
}

/* This is the magic: show the menu when hovering over the container */
.profile-dropdown-container:hover .profile-dropdown-menu {
    display: block;
}


.dropdown-header {
    padding: 10px 15px;
    font-size: 0.9em;
    color: #666;
}
.dropdown-header strong {
    color: #333;
}

.dropdown-divider {
    height: 1px;
    margin: 0.5rem 0;
    overflow: hidden;
    background-color: #eee;
    border: none;
}

.dropdown-item {
    display: block;
    padding: 8px 15px;
    text-decoration: none;
    color: #333;
    font-weight: bold;
}
.dropdown-item:hover {
    background-color: #f0f0f0;
}

/* --- Dark Mode Overrides for Dropdown --- */

.detail-list { list-style: none; padding: 0; }
.detail-list li { margin-bottom: 1rem; }
.detail-edit-link { font-size: 0.7em; font-weight: normal; }
.update-info { margin-top: 2rem; font-size: 0.8em; color: #888; text-align: right; }
.form-group { margin-bottom: 1rem; }

/* --- News Preview Styles (for Index Page) --- */

.news-preview-container {
    /* This can be empty for now, or we can add grid styles later */
}

.news-preview-item {
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid #ddd; /* Separates each news item */
    border-bottom-color: var(--border-light);
}

/* Remove the border from the very last item in the list */
.news-preview-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.news-preview-item h3 {
    margin-top: 0;
    margin-bottom: 0.25rem;
}

.news-meta {
    font-size: 0.9em;
    color: #666;
    margin-bottom: 0.75rem;
}

.news-excerpt {
    line-height: 1.5;
}


/* --- Dark Mode Overrides for News --- */



/* --- Cookie Consent Banner Styles --- */

#cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #222; /* A dark background for light mode */
    color: #f1f1f1;
    padding: 15px 20px;
    z-index: 1000;

    display: none; /* Hidden by default, shown by JavaScript */
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
}

#cookie-banner p {
    margin: 0;
    padding-right: 15px;
}

#cookie-banner button {
    background-color: #f1f1f1;
    color: #222;
    border: none;
    padding: 8px 15px;
    cursor: pointer;
    white-space: nowrap;
    border-radius: 4px; /* Add rounded corners to match other buttons */
    font-weight: bold;
}
#cookie-banner button:hover {
    opacity: 0.9;
}
/* In dark mode, the default dark background is already a good fit */
html.dark-mode #cookie-banner {
    /* No change needed for the banner background, but you could make it darker if you wish */
    /* background-color: #111; */
}

/* Make the button stand out in dark mode using our theme color */
html.dark-mode #cookie-banner button {
    background-color: var(--accent-dark); /* Use the bright red accent */
    color: var(--bg-dark); /* Use the dark background color for the text */
}


/* --- Profile Icon Navigation --- */

.nav-profile {
    position: relative; /* Needed for positioning the notification dot */
}

.profile-icon-link {
    text-decoration: none;
}

.profile-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%; /* Makes it a circle */
    background-color: #555; /* A neutral background */
    color: white;
    font-weight: bold;
    font-size: 1.2rem;

    /* Flexbox to perfectly center the initial */
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.2s;
}

.profile-icon:hover {
    background-color: #777;
}
.profile-icon-link:hover {
    text-decoration: none;
}
/* --- Profile Icon Role Colors --- */

/* Default logged-in user */
.profile-icon.role-user {
    background-color: #555;
    color: white;
}
.profile-icon.role-user:hover {
    background-color: #777;
}

/* Band Member */
.profile-icon.role-band-member {
    background-color: #8e44ad; /* A nice purple */
    color: white;
}
.profile-icon.role-band-member:hover {
    background-color: #9b59b6;
}
.profile-icon.role-venue-rep {
    background-color: #27ae60; /* A nice, solid green */
    color: white;
}
.profile-icon.role-venue-rep:hover {
    background-color: #2ecc71;
}
/* Moderator */
.profile-icon.role-moderator {
    background-color: #2980b9; /* A strong blue */
    color: white;
}
.profile-icon.role-moderator:hover {
    background-color: #3498db;
}

/* Admin */
.profile-icon.role-admin {
    background-color: #f39c12; /* A gold/orange color */
    color: #333;
}
.profile-icon.role-admin:hover {
    background-color: #f1c40f;
}
html.dark-mode .profile-icon.role-user {
    background-color: #888;
    color: #1c1c1c;
}
html.dark-mode .profile-icon.role-user:hover {
    background-color: #aaa;
}

html.dark-mode .profile-icon.role-band-member {
    background-color: #9b59b6; /* Lighter purple */
    color: white;
}

html.dark-mode .profile-icon.role-venue-rep {
    background-color: #2ecc71; /* Lighter/brighter green */
    color: white;
}

html.dark-mode .profile-icon.role-moderator {
    background-color: #3498db; /* Lighter blue */
    color: white;
}

html.dark-mode .profile-icon.role-admin {
    background-color: #f1c40f; /* Lighter gold */
    color: #333; /* Dark text has better contrast on light gold */
}
.role-tag {
    display: inline-flex; /* Use flexbox to align text and button */
    align-items: center;
    padding: 0.2em 0.6em;
    font-size: 0.8em;
    font-weight: bold;
    color: #fff;
    background-color: #777; /* Neutral gray background */
    border-radius: 4px;
    margin-right: 5px;
}

/* The 'x' button INSIDE the role tag */
.role-tag .remove-role-btn {
    background: none;
    border: none;
    color: #fff; /* White to match the tag text */
    cursor: pointer;
    font-size: 1.4em;
    line-height: 1;
    padding: 0 0 0 8px;
    opacity: 0.7;
    font-weight: bold;
}
.role-tag .remove-role-btn:hover {
    opacity: 1;
    color: var(--accent-light); /* Red on hover */
}
html.dark-mode .role-tag .remove-role-btn:hover {
    color: var(--accent-dark); /* Bright red on hover */
}

/* --- Dark Mode Overrides for Role Colors --- */



/* --- Notification Page Styles --- */

.notification-list {
    list-style: none;
    padding: 0;
}

.notification-item {
    background-color: #fff;
    border: 1px solid #ddd;
    border-left-width: 5px; /* This will be the colored accent bar */
    border-radius: 5px;
    padding: 1rem;
    margin-bottom: 1rem;
}

/* Style for the header of the notification (type, actor, date) */
.notification-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
    font-size: 0.9em;
    color: #666;
}

.notification-type {
    font-weight: bold;
}

/* Style for the main content of the notification */
.notification-content {
    padding-left: 10px;
    border-left: 2px solid #eee;
    margin-left: 5px;
}


/* --- Notification Type Colors --- */

.notification-item.type-warning {
    border-left-color: #f0ad4e; /* Orange */
}
.notification-item.type-warning .notification-type {
    color: #f0ad4e;
}

.notification-item.type-message {
    border-left-color: #5bc0de; /* Blue */
}
.notification-item.type-message .notification-type {
    color: #5bc0de;
}

.notification-item.type-alert {
    border-left-color: #d9534f; /* Red */
}
.notification-item.type-alert .notification-type {
    color: #d9534f;
}

.notification-item.type-role-message {
    border-left-color: #777; /* Gray */
}
.notification-item.type-role-message .notification-type {
    color: #777;
}

/* --- Dark Mode Overrides --- */



.notification-dot {
    position: absolute;
    top: 0;
    right: 0;
    width: 12px;
    height: 12px;
    background-color: red;
    border-radius: 50%;
    border: 2px solid #fff; /* Creates a nice border around the dot */
}


/* --- Footer Styles --- */
.site-footer {
    padding: 1rem 0;
    padding-bottom: 1rem;
    background-color: var(--bg-light); /* Use the greige background */
    border-color: var(--border-light);
    font-size: 0.9em;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Four equal columns on desktop */
    gap: 2rem;
}

.footer-column h4 {
    margin-bottom: 1rem;
    font-weight: bold;
    color: #333;
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 0.5rem;
}


/* --- News Preview Styles --- */
.news-meta {
    font-size: 0.9em;
    color: #666;
    margin-bottom: 0.5rem;
}



/* --- Concert List Item Styles --- */
.concert-list-item {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
    padding: 10px;
    border-radius: 5px;
    transition: background-color 0.2s;
}



.concert-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border: 1px solid #ccc;
    border-radius: 5px;
    border-color: var(--border-dark);
    margin-right: 1.5rem;
    flex-shrink: 0;
}



.concert-date .day {
    font-size: 1.5em;
    font-weight: bold;
    line-height: 1;
}

.concert-info {
    line-height: 1.4;
}

/* --- Live Search Results List Styles --- */

/* Style the container that holds the results */
.search-results-container {
    list-style: none;
    padding: 0;
    margin-top: 0.5rem;
    border: 1px solid #ccc;
    border-radius: 5px;
    max-height: 400px; /* Prevent the list from getting too long */
    overflow-y: auto;  /* Add a scrollbar if the list is long */
}

/* Style each individual result item */
.search-results-container li a {
    display: block; /* Make the entire area clickable */
    padding: 12px 15px;
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid #eee;
}

/* Remove the border from the very last item in the list */
.search-results-container li:last-child a {
    border-bottom: none;
}

/* Add a hover effect */
.search-results-container li a:hover {
    background-color: #f0f0f0;
}

/* Style for the secondary info (like venue location) */
.search-results-container .result-meta {
    font-size: 0.85em;
    color: #666;
    margin-left: 0.5em;
}


/* --- Dark Mode Styles for Live Search --- */



/* --- Admin Dashboard Styles --- */

/* Stat Cards */
.stat-card {
    text-align: center;
    border: 1px solid #ddd;
    padding: 1rem;
    border-radius: 5px;
}
.stat-card h3 {
    margin: 0 0 0.5rem 0;
    font-size: 2em;
}
.stat-card p {
    margin: 0;
    font-size: 0.9em;
    color: #666;
}

/* User Management Table */
.user-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
}
.user-table th,
.user-table td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}
.user-table th {
    border-bottom-width: 2px;
}

/* Dark Mode Overrides */


//* --- Tab Navigation Styles --- */
.tab-nav {
    display: flex;
    border-bottom: 2px solid #ddd;
    margin-bottom: 2rem;
}
.tab-link {
    padding: 10px 20px;
    cursor: pointer;
    background: none;
    border: none;
    font-size: 1.1em;
    font-weight: bold;
    color: #666;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
}
.tab-link.active {
    color: #333;
    border-bottom-color: #007bff;
}
.tab-content {
    display: none; /* Hide all content by default */
}
.tab-content.active {
    display: block; /* Show only the active one */
}

/* Dark Mode Overrides */