.bar {
    max-width: 60%;
    margin: auto;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 3.5rem 3rem;
    margin-top: -2%;
    flex-wrap: wrap;
    justify-content: space-between;
    position: relative;
    z-index: 1000;
}

[data-theme="light"] .bar {
    background: white;
}

[data-theme="dark"] .bar {
    background-color: #283a43;
}

.bar.create-mindroom {
    border-radius: 3rem;
    padding: 2rem;
}

.bar.create-mindroom .bar-button {
    width: auto;
    margin-right: 2rem;
}

[data-theme="dark"] .bar.create-mindroom .bar-button {
    color: var(--white)
}

.bar.mindrooms-filter-bar {
    background-color: transparent;
    z-index: 998;
    padding: 0;
    margin-top: 0;
}

#categoryFilter {
    z-index: 1000;
}

[data-theme="dark"] .mindrooms-filter-bar .filter-dropdown,
[data-theme="dark"] .mindrooms-filter-bar .filter-input,
[data-theme="dark"] .mindrooms-filter-bar .filter-input::placeholder {
    background-color: var(--white) !important;
    color: var(--very-light-gray) !important;
    z-index: 998;
}

.sorting-bar {
    height: 115px;
}

.bar.mindrooms-intro {
    background: transparent;
    color: var(--dark-gray);
    padding: 0px;
    margin-top: 5rem;
    margin-bottom: 1rem;
}

.bar.mindrooms-intro h2 {
    font-size: 2rem;
}


.bar-icon {
    background-color: var(--orange);
    border-radius: 1.5rem;
    padding: 0.8rem 0.8rem;
    margin-right: 2rem;
}

.bar-icon-image {
    width: 2.5rem;
}

.bar-text {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--dark-gray);
    margin-left: 1rem;
}

.mindrooms {
    background-color: var(--orange);
    margin-top: 0;
}

.mindrooms-filter-bar {
    background-color: transparent;
    border: none;
    margin-top: 3rem;
    box-shadow: none;
}

.bar-text span {
    font-size: 1rem;
    font-weight: 500;
}

.filter-field {
    display: flex;
    flex-direction: column;
    position: relative;
    width: 15%;
    /* Add these to contain the dropdown */
    overflow: visible;
    min-height: 1px;
    z-index: 1;
    /* Base z-index */
}

/* Ensure earlier fields appear above later fields for dropdowns */
.filter-field:nth-child(1) {
    z-index: 20;
}

.filter-field:nth-child(2) {
    z-index: 19;
}

.filter-field:nth-child(3) {
    z-index: 18;
}

.filter-field:nth-child(4) {
    z-index: 17;
}

.filter-field:nth-child(5) {
    z-index: 16;
}

/* Ensure the dropdown container has high enough z-index relative to filter field */

.filter-label {
    margin-bottom: 5px;
    font-weight: 600;
    color: var(--light-gray);
    font-size: 14px;
}

.filter-dropdown {
    padding: 12px 16px;
    border-radius: 0.5rem;
    font-size: 14px;
    background-color: #f8f6f2;
    color: var(--light-gray);
    cursor: pointer;
    transition: all 0.2s ease;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20stroke%3D%22%23475669%22%3E%3Cg%20id%3D%22SVGRepo_bgCarrier%22%20stroke-width%3D%220%22%3E%3C/g%3E%3Cg%20id%3D%22SVGRepo_tracerCarrier%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C/g%3E%3Cg%20id%3D%22SVGRepo_iconCarrier%22%3E%20%3Cpath%20d%3D%22M8%2010L12%2014L16%2010%22%20stroke%3D%22%23200E32%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C/path%3E%20%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 1rem;
    border: none;
    position: relative;
    z-index: 1;
}

.filter-field::after {
    border-radius: 2rem;
}


[data-theme="dark"] .filter-dropdown {
    background-color: #0f1521;
    color: var(--light-gray);
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M8%2010L12%2014L16%2010%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C/path%3E%3C/svg%3E");
}

/* Force the dropdown to open downwards */
.filter-dropdown:focus {
    z-index: 998;
    /* Higher when focused to appear above */
}

/* Style the dropdown options */
.filter-dropdown option {
    background: white;
    color: black;
    padding: 8px 12px;
    position: relative;
    border: none
}

[data-theme="dark"] .filter-dropdown option {
    background-color: rgba(71, 85, 105, 0.9) !important;
    color: var(--light-gray);
    border: none;
}

.filter-input {
    padding: 10px;
    background-color: #f8f6f2;
    border: 0;
    border-radius: 4px;
    font-size: 14px;
    color: #283a43;
}

[data-theme="dark"] .filter-input {
    background-color: #0f1521;
    color: var(--light-gray);
}

.filter-input::placeholder {
    color: #283a43;
}

[data-theme="dark"] .filter-input::placeholder {
    color: var(--light-gray);
}

[data-theme="dark"] .bar.mindrooms-filter-bar .filter-input::placeholder,
.bar.mindrooms-filter-bar .filter-datetime {
    color: var(--very-light-gray);
}

.filter-input:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.1);

}

.searchable-dropdown {
    position: relative;
    width: 100%;
    z-index: 20;
}

.dropdown-input-container {
    position: relative;
}

.searchable-dropdown-input {
    width: 100%;
    box-sizing: border-box;
}

.searchable-dropdown-input:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

.dropdown-options {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 200px;
    overflow-y: auto;
    background: var(--white);
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 998;
    display: none;
}

[data-theme="dark"] .dropdown-options {
    background-color: #0f1521;
    color: white;
}

.dropdown-options.active {
    display: block;
    z-index: 999;
}

.dropdown-option {
    padding: 8px 12px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.dropdown-option:hover {
    background-color: var(--off-white);
}

[data-theme="dark"] .dropdown-option:hover {
    background-color: var(--white);
}


.dropdown-option.selected {
    background-color: #007bff;
    color: white;
}

.no-results {
    padding: 12px;
    color: #666;
    text-align: center;
    font-style: italic;
}


.bar-button {
    padding: 10px 20px;
    color: var(--white);
    border: none;
    border-radius: 2rem;
    cursor: pointer;
    font-size: 1rem;
    white-space: nowrap;
    margin-top: 1rem;
    font-weight: 700;

}

[data-theme="dark"] .home-bar-button {
    color: #0f1521;

}

.home-bar-button {
    background: var(--dark-turquoise);
}



/* Additional fix for dropdown container */
.filter-field::after {
    content: '';
    position: absolute;
    bottom: -100px;
    /* Space for dropdown to open */
    left: 0;
    right: 0;
    height: 10px;
    background: transparent;
    pointer-events: none;
    z-index: 998;
}

div.bar-title {
    display: flex;
    align-items: center;

}


@media (max-width:1600px) {
    .bar.create-mindroom {
        max-width: 80%;
    }

    .bar.create-mindroom .bar-button {
        margin: auto;
    }

    .filter-field,
    .bar-button {
        width: 50%;
        margin: auto;
    }
}

@media (max-width:1150px) {
    .bar {
        justify-content: center;
    }

    .bar.create-mindroom {
        flex-direction: column;
    }

    .bar-title {
        justify-content: center;
        flex-direction: column;
        ;
    }

    .bar-text {
        text-align: center;
        display: flex;
        flex-direction: column;
    }
}

@media (max-width: 600px) {
    .bar {
        margin-top: 2rem;
        max-width: 80%;
        padding: 1rem;
    }

    .filter-field,
    .bar-button {
        width: 100%;
        margin: auto;
    }
}

@media (max-width: 400px) {

    .filter-field,
    .bar-button {
        font-size: 0.8rem;
    }
}

/* Multi-select language dropdown styles ported from user.css */
.language-dropdown-container {
    position: relative;
    width: 100%;
    z-index: 20;
}

.language-dropdown-trigger {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    /* Matched filter-input padding */
    border: none;
    border-radius: 4px;
    cursor: pointer;
    background-color: #f8f6f2;
    /* Matched filter-input bg */
    min-height: 40px;
    /* Ensure consistent height */
    font-size: 14px;
    color: #283a43;
}

[data-theme="dark"] .language-dropdown-trigger {
    background-color: #0f1521;
}

.selected-languages-display {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    flex: 1;
    margin-right: 8px;
}

#homeLanguageFilter .selected-languages-display.placeholder {
    color: #283a43;
}

/* Scoped styles for mindrooms page logic */
/* Since JS injects the same structure, we target the container if we can, or use the hidden input sibling selector if structure allows, 
   but structure is hidden input inside container.
   Actually, the best way given the user input is to target the specific container ID if it was unique, but it's not. 
   However, on mindrooms.html the hidden input has ID mindroomsLanguageFilter. 
   We can use the sibling selector or :has() pseudo-class if supported, or rely on a parent class.
   
   Better approach: The user asked for "mindrooms page". 
   In mindrooms.html, the container is inside .mindrooms-filter-bar.
*/

[data-theme="dark"] .mindrooms-filter-bar .language-dropdown-trigger {
    background-color: #283a43;
    /* Determine text color for dark background */
}

.mindrooms-filter-bar .language-dropdown-trigger .dropdown-arrow {
    color: var(--light-gray);
}

[data-theme="dark"] .selected-languages-display.placeholder {
    color: var(--very-light-gray);
}

.language-dropdown-panel {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    z-index: 1001;
    /* Higher than other dropdowns */
    max-height: 300px;
    overflow-y: auto;
    margin-top: 4px;
}

[data-theme="dark"] .language-dropdown-panel {
    background-color: #0f1521;
    color: white;
    border: 1px solid #333;
}

.language-dropdown-panel.show {
    display: block;
}

.dropdown-search {
    padding: 8px;
    border-bottom: 1px solid #eee;
    position: sticky;
    top: 0;
    background: white;
    z-index: 1;
}

[data-theme="dark"] .dropdown-search {
    background-color: #0f1521;
    border-bottom: 1px solid #333;
}

.dropdown-search-input {
    width: 100%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #f8f6f2;
}

[data-theme="dark"] .dropdown-search-input {
    background-color: #1a202c;
    border-color: #333;
    color: white;
}

.dropdown-list-items {
    max-height: 200px;
    overflow-y: auto;
}

.dropdown-list-item {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.dropdown-list-item:hover {
    background-color: var(--off-white);
}

[data-theme="dark"] .dropdown-list-item:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.dropdown-list-item.selected {
    background-color: #e6f7ff;
}

[data-theme="dark"] .dropdown-list-item.selected {
    background-color: rgba(0, 123, 255, 0.2);
}

.checkbox-icon {
    width: 20px;
    display: inline-block;
    color: var(--dark-turquoise);
    font-weight: bold;
}

/* Chips styles */
.selected-language-chip {
    background-color: #e0e0e0;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.85em;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

[data-theme="dark"] .selected-language-chip {
    background-color: #334155;
    color: var(--light-gray);
}

.chip-remove {
    cursor: pointer;
    font-weight: bold;
    color: #666;
}

[data-theme="dark"] .chip-remove {
    color: #aaa;
}

.chip-remove:hover {
    color: #000;
}

[data-theme="dark"] .chip-remove:hover {
    color: white;
}

.chip-separator {
    display: none;
    /* Hide separator as we use gap */
}