:root {
    --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
    --border-radius-organic: 12px;
    --border-radius-standard: 8px;
    
    --bg-primary-dark: #121212;
    --bg-glass-surface: rgba(30, 30, 40, 0.65);
    --bg-glass-surface-light: rgba(40, 40, 50, 0.75);
    --bg-neumorphic-raised: #232328;
    --bg-neumorphic-pressed: #1a1a1e;
    
    --text-primary-high-contrast: #EAEAEA;
    --text-primary-high-contrast-rgb: 234, 234, 234;
    --text-secondary-muted: #A0A0A0;
    --text-secondary-muted-rgb: 160, 160, 160;
    
    --accent-color-vibrant-teal: #00F0FF;
    --accent-color-vibrant-teal-darker: #00D0E0;
    --accent-text-color-on-vibrant: #0D1018;
    --accent-color-vibrant-teal-rgb: 0, 240, 255;

    --border-color-glass: rgba(255, 255, 255, 0.12);
    --border-color-standard: #383838;

    --danger-bg: #B00020;
    --danger-text: #EAEAEA;
    --danger-hover-bg: #8C001A;

    --success-text: #50C878;
    --success-text-rgb: 80, 200, 120;
    --error-text: #FF6B6B;
    --error-text-rgb: 255, 107, 107;

    --shadow-color-soft-lift: rgba(0, 0, 0, 0.2);
    --shadow-color-neumorphic-outer: rgba(0,0,0, 0.4);
    --highlight-color-neumorphic-outer: rgba(255,255,255, 0.05);

    --input-padding: 14px;
    --button-padding: 12px 28px;
    --card-padding: 28px;
    --container-max-width: 960px;
}

body {
    font-family: var(--font-family);
    background-color: var(--bg-primary-dark);
    color: var(--text-primary-high-contrast);
    margin: 0;
    padding-top: 80px;
    line-height: 1.7;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 100vh;
    font-size: 16px;
}

.top-bar {
    background: var(--bg-glass-surface);
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    color: var(--text-primary-high-contrast);
    padding: 0 25px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    z-index: 1000;
    border-bottom: 1px solid var(--border-color-glass);
}

.top-bar .logo a {
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--accent-color-vibrant-teal);
    text-decoration: none;
    letter-spacing: 0.5px;
}

/* New Styles for Top Bar Navigation */
.top-bar-nav {
    display: flex;
    gap: 25px; /* Spacing between nav items */
    margin: 0 auto; /* Centers the nav block if space allows, between logo and user-info */
}

.top-bar-nav a {
    color: var(--text-secondary-muted);
    text-decoration: none;
    font-size: 1rem;
    font-weight: 500;
    padding: 5px 0;
    border-bottom: 2px solid transparent;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.top-bar-nav a:hover,
.top-bar-nav a.active-nav-link /* Class to be added by JS for current page/section */
{
    color: var(--accent-color-vibrant-teal);
    border-bottom-color: var(--accent-color-vibrant-teal);
}
/* End New Styles */

.top-bar .user-info {
    display: flex;
    align-items: center;
    gap: 20px;
}

.top-bar .user-info span, .top-bar .user-info a {
    font-size: 0.95rem;
    color: var(--text-secondary-muted);
    text-decoration: none;
}
.top-bar .user-info a:hover {
    color: var(--accent-color-vibrant-teal);
}

/* Brigade name hover effect */
#userBrigadeStatusLinkTopBar {
    padding: 5px 0px; /* Add some padding for the border to look good */
    border-bottom: 2px solid transparent; /* Placeholder for smooth transition */
    transition: border-color 0.2s ease, color 0.2s ease;
    display: inline-block; /* Ensures padding and border apply correctly */
}

#userBrigadeStatusLinkTopBar:hover {
    color: var(--accent-color-vibrant-teal); /* Keep text color change */
    border-bottom-color: var(--accent-color-vibrant-teal); /* Accent border on hover */
}

/* Username and Logout button interaction */
.username-logout-container {
    position: relative; /* For positioning logout button if needed, or just for grouping */
    display: flex; /* Align username and button */
    align-items: center;
}

#loggedInUserInfo {
    /* The span with ID loggedInUserInfo now just wraps the username span */
    /* We can style #loggedInUsername directly if needed, or this parent */
    padding-right: 10px; /* Space before logout button appears */
    cursor: default; /* Indicate it's not directly clickable for an action */
}

#loggedInUserInfo #loggedInUsername {
    transition: color 0.2s ease;
}

.username-logout-container:hover #loggedInUserInfo #loggedInUsername {
    color: var(--text-primary-high-contrast); /* Slightly brighten username on container hover */
}

.username-logout-container #logoutButton {
    opacity: 0;
    visibility: hidden;
    transform: translateX(-10px); /* Start slightly to the left for slide-in */
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
    margin-left: 0px; /* Will be adjusted if needed */
    pointer-events: none; /* Prevent interaction when hidden */
}

.username-logout-container:hover #logoutButton {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    pointer-events: auto; /* Allow interaction when visible */
}

.container {
    width: 90%;
    max-width: var(--container-max-width);
    margin: 40px auto;
    padding: 0;
    background-color: transparent;
    border-radius: 0;
    box-shadow: none;
    text-align: left;
}

h1, h2, h3 {
    color: var(--text-primary-high-contrast);
    margin-top: 0;
    margin-bottom: 1em;
    font-weight: 600;
}

h1 {
    font-size: 2.2rem;
    color: var(--accent-color-vibrant-teal);
    margin-bottom: 1.2em;
}

h2 {
    font-size: 1.8rem;
    border-bottom: 1px solid var(--border-color-standard);
    padding-bottom: 0.6em;
}

h3 {
    font-size: 1.4rem;
    color: var(--text-secondary-muted);
    font-weight: 500;
}

a {
    color: var(--accent-color-vibrant-teal);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    text-decoration: none;
    color: var(--accent-color-vibrant-teal-darker);
}

.input-group {
    display: flex;
    gap: 15px;
    margin-bottom: 25px;
}

input[type="text"],
input[type="password"],
select {
    flex-grow: 1;
    padding: var(--input-padding);
    border: 1px solid var(--border-color-standard);
    border-radius: var(--border-radius-standard);
    font-size: 1rem;
    background-color: var(--bg-neumorphic-pressed);
    color: var(--text-primary-high-contrast);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-shadow: inset 2px 2px 4px rgba(0,0,0,0.2), inset -2px -2px 4px var(--highlight-color-neumorphic-outer);
}

input[type="text"]:focus,
input[type="password"]:focus,
select:focus {
    outline: none;
    border-color: var(--accent-color-vibrant-teal);
    box-shadow: inset 2px 2px 4px rgba(0,0,0,0.2), 
                inset -2px -2px 4px var(--highlight-color-neumorphic-outer), 
                0 0 0 2px var(--accent-color-vibrant-teal-darker);
}

button, .button {
    padding: var(--button-padding);
    font-size: 1rem;
    border: none;
    border-radius: var(--border-radius-standard);
    cursor: pointer;
    font-weight: 500;
    transition: all 0.2s ease;
    background-color: var(--accent-color-vibrant-teal);
    color: var(--accent-text-color-on-vibrant);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0px 2px 5px rgba(0,0,0,0.2), 
                1px 1px 2px var(--highlight-color-neumorphic-outer) inset, 
                -1px -1px 2px var(--shadow-color-neumorphic-outer) inset;
}

button:hover, .button:hover {
    background-color: var(--accent-color-vibrant-teal-darker);
    transform: translateY(-2px);
    box-shadow: 0px 4px 8px rgba(0,0,0,0.3), 
                1px 1px 2px var(--highlight-color-neumorphic-outer) inset, 
                -1px -1px 2px var(--shadow-color-neumorphic-outer) inset;
}

button:active, .button:active {
    transform: translateY(0px);
    box-shadow: inset 2px 2px 5px var(--shadow-color-neumorphic-outer), 
                inset -1px -1px 2px var(--highlight-color-neumorphic-outer);
}

button.secondary, .button.secondary {
    background-color: var(--bg-neumorphic-raised);
    color: var(--text-secondary-muted);
    border: 1px solid var(--border-color-standard);
    box-shadow: 1px 1px 3px var(--shadow-color-neumorphic-outer), -1px -1px 3px var(--highlight-color-neumorphic-outer);
}

button.secondary:hover, .button.secondary:hover {
    background-color: var(--bg-neumorphic-pressed);
    color: var(--text-primary-high-contrast);
    border-color: var(--accent-color-vibrant-teal);
    box-shadow: 1px 1px 2px var(--shadow-color-neumorphic-outer), -1px -1px 2px var(--highlight-color-neumorphic-outer);
}

button.danger-button, .button.danger-button {
    background-color: var(--danger-bg);
    color: var(--danger-text);
    box-shadow: 0px 2px 5px rgba(0,0,0,0.2), 
    1px 1px 2px rgba(255,255,255,0.1) inset, 
    -1px -1px 2px rgba(0,0,0,0.3) inset;
}

button.danger-button:hover, .button.danger-button:hover {
    background-color: var(--danger-hover-bg);
    box-shadow: 0px 4px 8px rgba(0,0,0,0.3), 
    1px 1px 2px rgba(255,255,255,0.1) inset, 
    -1px -1px 2px rgba(0,0,0,0.3) inset;
}

button:disabled {
    background-color: var(--bg-neumorphic-pressed);
    color: var(--text-secondary-muted);
    cursor: not-allowed;
    transform: none;
    box-shadow: inset 1px 1px 3px var(--shadow-color-neumorphic-outer), 
                inset -1px -1px 3px var(--highlight-color-neumorphic-outer);
    opacity: 0.6;
}

.error-message {
    color: var(--error-text);
    background-color: rgba(var(--error-text-rgb, 255, 107, 107), 0.1);
    padding: 10px 15px;
    border-left: 3px solid var(--error-text);
    border-radius: var(--border-radius-standard);
    font-size: 0.9rem;
    margin-top: 5px;
    margin-bottom: 15px;
}

.success-message {
    color: var(--success-text);
    background-color: rgba(var(--success-text-rgb, 80, 200, 120), 0.1);
    padding: 10px 15px;
    border-left: 3px solid var(--success-text);
    border-radius: var(--border-radius-standard);
    font-size: 0.9rem;
    margin-top: 5px;
    margin-bottom: 15px;
}

.info-message {
    color: var(--text-secondary-muted);
    background-color: var(--bg-glass-surface-light);
    border: 1px solid var(--border-color-glass);
    padding: 10px 15px;
    border-radius: var(--border-radius-organic);
    margin-bottom: 15px;
    font-size: 0.9rem;
}

ul {
    list-style-type: none;
    padding: 0;
}

ul li {
    padding: 12px 0;
    border-bottom: 1px solid var(--border-color-glass);
    transition: background-color 0.2s ease;
}
ul li:hover {
    background-color: rgba(var(--accent-color-vibrant-teal-rgb, 0, 240, 255), 0.05);
}

ul li:last-child {
    border-bottom: none;
}

#consultationListAdmin li {
    background: var(--bg-glass-surface);
    padding: 18px;
    margin-bottom: 18px;
    border-radius: var(--border-radius-standard);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid var(--border-color-glass);
    box-shadow: 0 2px 5px var(--shadow-color-soft-lift);
}

#consultationListAdmin li .participants {
    font-size: 0.9rem;
    color: var(--text-primary-high-contrast);
    background-color: var(--accent-color-vibrant-teal);
    color: var(--accent-text-color-on-vibrant);
    padding: 6px 12px;
    border-radius: 20px;
    font-weight: 500;
}

#consultationListAdmin li button {
    padding: 8px 15px;
    font-size: 0.9rem;
}

.small-button {
    padding: 8px 15px !important;
    font-size: 0.9rem !important;
    text-transform: none;
    letter-spacing: 0;
}

@media (max-width: 768px) {
    body {
        padding-top: 70px;
        font-size: 15px;
    }
    .top-bar {
        padding: 0 15px;
        height: 60px;
    }
     .top-bar .logo a {
        font-size: 1.6rem;
    }
    .container {
        width: 95%;
        margin: 20px auto;
    }
    .card {
        padding: calc(var(--card-padding) * 0.8);
    }
    h1 { font-size: 1.8rem; }
    h2 { font-size: 1.5rem; }
    h3 { font-size: 1.2rem; }

    .input-group {
        flex-direction: column;
    }
    .input-group button {
        width: 100%;
    }
    .top-bar .user-info {
        gap: 10px;
    }
    .top-bar .user-info span, .top-bar .user-info a {
        font-size: 0.85rem;
    }
    .consultation-card {
        padding: calc(var(--card-padding) * 0.7);
    }
    .consultation-card-name {
        font-size: 1.3rem;
    }
    .consultation-card-date,
    .consultation-card-participants {
        font-size: 0.9rem;
    }
}

/* Styles for the new consultation cards on index.html */
.card-list-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /* Responsive grid */
    gap: 35px; /* Increased from 25px */
}

.consultation-card {
    display: block; /* To make the <a> tag behave like a block for padding/border */
    background: var(--bg-glass-surface-light);
    backdrop-filter: blur(10px) saturate(150%);
    -webkit-backdrop-filter: blur(10px) saturate(150%);
    border: 1px solid var(--border-color-glass);
    border-radius: var(--border-radius-organic);
    padding: var(--card-padding);
    text-decoration: none;
    color: var(--text-primary-high-contrast);
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 4px 15px var(--shadow-color-soft-lift);
}

.consultation-card:hover {
    border-color: var(--accent-color-vibrant-teal);
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(var(--accent-color-vibrant-teal-rgb), 0.3);
}

.consultation-card-name {
    font-size: 1.7rem; /* Large font for name */
    font-weight: 600;
    color: var(--text-primary-high-contrast);
    margin-top: 0;
    margin-bottom: 0.5em;
}

.consultation-card-date {
    font-size: 1rem; /* Medium font for date */
    color: var(--text-secondary-muted);
    margin-bottom: 0.3em;
}

.consultation-card-participants {
    display: inline-block; /* To allow padding and border-radius to form pill */
    font-size: 0.9rem; /* Matched to admin panel style */
    background-color: var(--accent-color-vibrant-teal);
    color: var(--accent-text-color-on-vibrant);
    padding: 6px 12px;
    border-radius: 20px; /* Pill shape */
    font-weight: 500;
    margin-top: 0.8em;
    /* text-align: center; /* Not usually needed for inline-block with text */
}

/* Adjustments for the detail view title and date */
#consultationDetailView #pageTitle {
    /* font-size: 2rem; /* Already large via h1 base */ 
    /* color: var(--accent-color-vibrant-teal); /* Already set for H1 */
}

#consultationDetailView #consultationDateDisplay {
    font-size: 1.2rem; /* Prominent date */
    color: var(--text-secondary-muted);
    margin-top: -0.5em; /* Pull up a bit under the title */
    margin-bottom: 1.5em;
}

/* Status Indicator Styles */
.status-indicator {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 12px; /* Pill shape */
    font-size: 0.8rem;
    font-weight: 500;
    margin-left: 10px;
    border: 1px solid transparent;
    vertical-align: middle; /* Align with text better */
}

.status-past {
    background-color: rgba(var(--text-secondary-muted-rgb, 160, 160, 160), 0.15);
    border-color: var(--text-secondary-muted);
    color: var(--text-secondary-muted);
}

.status-today {
    background-color: rgba(var(--success-text-rgb, 80, 200, 120), 0.2);
    border-color: var(--success-text);
    color: var(--success-text);
}

.status-future {
    background-color: rgba(var(--text-primary-high-contrast-rgb, 234, 234, 234), 0.1);
    border-color: var(--text-secondary-muted);
    color: var(--text-secondary-muted);
}

/* Consultation Detail Page Header Actions */
.consultation-header-actions {
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* Align to top if text wraps */
    margin-bottom: 25px; /* Space before the signup card */
}

.consultation-title-date {
    flex-grow: 1; /* Allow title/date to take available space */
}

.consultation-title-date #pageTitle {
    margin-bottom: 0.2em; /* Reduce space between title and date */
}

.consultation-action-buttons {
    display: flex;
    gap: 10px;
    margin-left: 20px; /* Space between title block and buttons */
    flex-shrink: 0; /* Prevent buttons from shrinking too much */
}

/* Styling for the list of signed-up brigades */
#consultationList li {
    /* Existing styles: padding, border-bottom, transition, hover background */
    /* We will enhance this */
    border: 1px solid var(--border-color-glass); /* Default border for each item */
    border-radius: var(--border-radius-standard);
    margin-bottom: 10px; /* Space between brigade items */
    padding: 15px 20px; /* More padding inside the item */
    transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.1s ease;
}

#consultationList li:hover {
    border-color: var(--accent-color-vibrant-teal);
    background-color: rgba(var(--accent-color-vibrant-teal-rgb), 0.08); /* Slightly more pronounced hover */
    transform: translateY(-2px);
}

#consultationList li a {
    color: var(--text-primary-high-contrast);
    text-decoration: none;
    font-weight: 500;
    display: block; /* Make the link take full item width for easier clicking */
}

#consultationList li a:hover {
    color: var(--accent-color-vibrant-teal); /* Link text color change on hover is fine */
}

/* New Styles for Brigade Cards on index.html */
.brigade-card {
    display: block; /* Similar to consultation-card */
    background: var(--bg-glass-surface-light);
    backdrop-filter: blur(10px) saturate(150%);
    -webkit-backdrop-filter: blur(10px) saturate(150%);
    border: 1px solid var(--border-color-glass);
    border-radius: var(--border-radius-organic);
    padding: var(--card-padding);
    text-decoration: none;
    color: var(--text-primary-high-contrast);
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 4px 15px var(--shadow-color-soft-lift);
}

.brigade-card:hover {
    border-color: var(--accent-color-vibrant-teal);
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(var(--accent-color-vibrant-teal-rgb), 0.3);
}

.brigade-card-name {
    font-size: 1.7rem; /* Consistent with consultation-card-name */
    font-weight: 600;
    color: var(--text-primary-high-contrast);
    margin-top: 0;
    margin-bottom: 0; /* No extra margin needed if it's the only content */
    text-align: center; /* Center the brigade name */
}
/* End New Brigade Card Styles */

/* Adjustments for the detail view title and date */
#consultationDetailView #pageTitle {
    /* font-size: 2rem; /* Already large via h1 base */ 
    /* color: var(--accent-color-vibrant-teal); /* Already set for H1 */
}

#consultationDetailView #consultationDateDisplay {
    font-size: 1.2rem; /* Prominent date */
    color: var(--text-secondary-muted);
    margin-top: -0.5em; /* Pull up a bit under the title */
    margin-bottom: 1.5em;
}

/* Role-based username colors */
.role-cons-admin {
    color: #396ff7 !important; /* Use !important to ensure override if needed, can be removed if not */
}

.role-admin {
    color: #b30909 !important; /* Use !important to ensure override if needed */
}

/* End Role-based username colors */

/* New style for expand/collapse list button */
.expand-list-button {
    display: block; /* Block to take its own line */
    margin: 20px auto 10px auto; /* Center it and add some margin */
    padding: 10px 25px;
    font-size: 0.95rem;
    background-color: var(--bg-neumorphic-raised); /* Greyish background */
    color: var(--text-secondary-muted);
    border: 1px solid var(--border-color-standard); /* Standard border */
    border-radius: var(--border-radius-standard);
    cursor: pointer;
    font-weight: 500;
    transition: all 0.2s ease;
    box-shadow: 1px 1px 3px var(--shadow-color-neumorphic-outer), -1px -1px 3px var(--highlight-color-neumorphic-outer);
}

.expand-list-button:hover {
    background-color: var(--bg-neumorphic-pressed);
    color: var(--text-primary-high-contrast);
    border-color: var(--accent-color-vibrant-teal);
}

/* Styles for Collapsible Admin Sections */
.collapsible-header {
    display: flex;
    align-items: center;
    cursor: pointer;
    user-select: none; /* Prevent text selection on click */
    padding-bottom: 0.6em; /* Keep existing h2 padding */
    /* border-bottom: 1px solid var(--border-color-standard); /* Keep existing h2 border */
    /* margin-bottom: 1em; /* Keep existing h2 margin */
}

.collapsible-header .toggle-icon {
    margin-right: 10px;
    font-size: 1em; /* Adjust size as needed */
    transition: transform 0.2s ease;
    display: inline-block; /* Allows transform */
}

.collapsible-header.expanded .toggle-icon {
    transform: rotate(90deg);
}

.collapsible-content {
    /* display: none; /* Initial state set in HTML, controlled by JS */
    /* Add any specific styling for the content area if needed, like padding-top */
    padding-top: 10px; 
}

/* Ensure h2 specific styles are still applied if .collapsible-header is on an h2 */
h2.collapsible-header {
    /* H2 specific styles like font-size, border-bottom, padding-bottom are inherited or should be reapplied if needed */
    /* These are mostly covered by the base h2 style, .collapsible-header just adds flex and cursor */
}