/* Board styles */
.board-container {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 2rem;
    min-width: fit-content;
}

/* Board menu button styles */
.board-menu-button {
    color: var(--bs-light);
    opacity: 0.7;
    padding: 0 0.5rem;
    font-size: 2rem;
    line-height: 1;
    transition: opacity 0.2s;
    text-decoration: none !important;
    margin-left: 15px;
    display: inline-flex;
    align-items: center;
    transform: translateY(-8px);
}

.board-menu-button:hover,
.board-menu-button:focus {
    opacity: 1;
    color: var(--bs-light);
    text-decoration: none !important;
}


#boardTitle .dropdown-menu {
    min-width: 200px;
    padding: 0.5rem 0;
    margin: 0;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

#boardTitle .dropdown-item {
    padding: 0.5rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

#boardTitle .dropdown-item:hover {
    background-color: var(--bs-primary);
}

#boardTitle .menu-icon {
    opacity: 0.7;
    font-size: 1.1rem;
}

#boardTitle .dropdown-item:hover .menu-icon {
    opacity: 1;
}

/* Update board title to use flexbox */
#boardTitle {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.75rem;
    font-weight: 500;
}

.board-list-section {
    min-width: 350px;
    max-height: calc(100vh - 120px);
    display: flex;
    flex-direction: column;
    width: 350px;
    position: relative;
}

.board-list-section.ready {
    overflow-y: auto;
}

/* Hide Board List button styles */
.board-list-section .btn-outline-secondary {
    margin-top: auto;  /* Push to bottom */
    border-color: rgba(255, 255, 255, 0.1);
    font-size: 0.9rem;
    padding: 0.5rem;
}

.board-list-section .btn-outline-secondary:hover {
    background-color: var(--bs-dark-text-emphasis);
}

.board-content-section {
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    background: transparent !important;
}

/* Add extra space only in web view */
@media (min-width: 769px) {
    .board-spacer {
        display: block;
        visibility: visible; /* Will change to hidden later */
        border: 2px dashed rgba(255, 0, 0, 0.5); /* Temporary */
    }
}

@media (max-width: 768px) {
    .board-spacer {
        display: none;
    }
}

/* Remove Bootstrap's default caret 
.board-menu-button::after {
    display: none;
}
*/

/* Board list styling */
#boardList {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    position: relative;
    padding-top: 0.05rem;
    padding-left: 0.5rem;
    padding-right: 16px;
    margin-right: -8px;
    overflow-y: auto;
    flex: 1;
    width: 100%;
    box-sizing: border-box;
    /* Firefox scrollbar styling */
    scrollbar-width: thin;
    scrollbar-color: transparent var(--bs-dark);
    /* Smooth scrolling on touch devices */
    -webkit-overflow-scrolling: touch;
    position: relative;
    overflow: hidden; /* Prevent layout shifts during transitions */
}

/* Webkit scrollbar styling */
#boardList::-webkit-scrollbar {
    width: 10px;
    background-color: transparent;
}

#boardList::-webkit-scrollbar-track {
    background: rgba(var(--bs-dark-rgb), 0.5); /* Lighter shade of dark */
    border-radius: 10px;
}

#boardList::-webkit-scrollbar-thumb {
    background-color: transparent;
    border-radius: 10px;
    min-height: 100px;
    border: 2px solid var(--bs-primary);
    transition: all 0.2s ease;
}

/* Hover effect for the scrollbar and its impact on board items */
#boardList::-webkit-scrollbar-thumb:hover,
#boardList:hover::-webkit-scrollbar-thumb {
    background-color: rgba(var(--bs-primary-rgb), 0.25);
    border-width: 2px;
}

/* Make all board items visible when scrollbar is hovered or being used */
#boardList:has(::-webkit-scrollbar-thumb:hover) button:not(.featured-board),
#boardList:has(::-webkit-scrollbar-thumb:hover) button:not(.featured-board) .board-list-menu,
#boardList:has(::-webkit-scrollbar-thumb:hover) button:not(.featured-board) .board-robot-icon,
#boardList:has(::-webkit-scrollbar-thumb:hover) button:not(.featured-board) .star-icon,
#boardList:has(::-webkit-scrollbar-thumb:hover) button:not(.featured-board) .bi-three-dots-vertical,
#boardList:has(::-webkit-scrollbar-thumb:hover) button:not(.featured-board) .dropdown-toggle::after {
    color: var(--bs-light);
    opacity: 1;
    border-color: rgba(255, 255, 255, 0.2);
}

/* Firefox scrollbar styles */
#boardList {
    scrollbar-width: thin;
    scrollbar-color: transparent var(--bs-dark);
}

/* Firefox hover effect */
#boardList:hover {
    scrollbar-color: transparent var(--bs-dark);
}

/* Removed container-level hover effect - items should only brighten when directly hovered */
/* Previously: #boardList:hover would brighten all inactive items when hovering anywhere on the container */

/* Mobile adjustments */
@media (max-width: 768px) {
    .board-list-section {
        min-width: 100%;
        height: auto;
        max-height: calc((60px * 5) + 3.5rem);
        padding-right: 1rem;
        overflow: hidden;
    }

    #boardList {
        padding-right: 12px;
        margin-right: -8px;
        height: 100%;
        min-height: 0;
    }

    #boardList::-webkit-scrollbar {
        width: 8px;
        display: block;
    }

    /* Add mobile-specific scrollbar thumb styling to match desktop */
    #boardList::-webkit-scrollbar-thumb {
        background-color: transparent;
        border: 2px solid var(--bs-primary);
        min-height: 100px;
        border-radius: 10px;
    }

    #boardList::-webkit-scrollbar-thumb:hover {
        background-color: rgba(var(--bs-primary-rgb), 0.25);
        border-width: 2px;
    }
}

#boardList.sorted {
    display: flex;  /* Show with flex layout when sorted */
}

/* Show add-column-container when board list is sorted (web view only) */
@media (min-width: 769px) {
    #boardList.sorted ~ .add-column-container {
        display: block !important;  /* Override d-none */
    }
}

/* Hide add-column-container by default and in mobile */
.add-column-container {
    display: none;
    margin: 1.5rem auto; /* Center horizontally with auto margins */
    width: 97%; /* Match width with the previous changes */
}

/* Button base styles */
#boardList button {
    background-color: var(--bs-dark);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.25rem;
    padding: 0.75rem;
    padding-right: 1.25rem;
    color: var(--bs-dark-border-subtle);
    text-align: left;
    transition: all 0.2s ease;
    position: relative;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
    font-size: 1.2rem;
    will-change: auto;
    backface-visibility: hidden;
    transform: translateZ(0);
}

/* First/active item styles */
#boardList button.featured-board {
    background-color: var(--bs-dark);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--bs-light);
    font-size: 1.75rem;
    font-weight: 500;
    margin-bottom: 1.75rem;
    transition: background-color 0.3s ease-in-out,
                border-color 0.25s ease-in-out,
                color 0.25s ease-in-out,
                font-size 0.4s ease-out,
                font-weight 0.3s ease-out;
    position: relative;
    z-index: 2;
    contain: layout style;
}

#boardList button.featured-board.selected {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    /* Subtle riveted look */
    background-image: 
        radial-gradient(circle at 10px center, rgba(0,0,0,0.1) 2px, transparent 2px),
        radial-gradient(circle at calc(100% - 10px) center, rgba(0,0,0,0.1) 2px, transparent 2px);
    transition: background-color 0.3s ease-in-out,
                border-color 0.25s ease-in-out;
}

/* Add gradient separator after featured board */
#boardList button.featured-board::after {
    content: '';
    position: absolute;
    bottom: -1.4rem;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        var(--bs-primary) 50%, 
        transparent 100%
    );
    opacity: 0; /* Start with opacity 0 */
    box-shadow: 0 0 8px rgba(var(--bs-primary-rgb), 0.3);
    pointer-events: none;  /* Ensure it doesn't interfere with interactions */
    transition: opacity 0.3s ease; /* Add smooth transition */
}

/* Only show gradient bar when content is loaded */
body.content-loaded #boardList button.featured-board::after {
    opacity: 0.8; /* Restore the original opacity when content is loaded */
}

#boardList button.featured-board > span {
    display: flex;
    align-items: center;
    min-height: 6.5rem;
    padding-right: 1.75rem;
}

#boardList button.featured-board .board-list-menu,
#boardList button.featured-board .board-robot-icon,
#boardList button.featured-board .star-icon,
#boardList button.featured-board .bi-three-dots-vertical,
#boardList button.featured-board .dropdown-toggle::after,
#boardList button.featured-board .dropdown-item {
    color: var(--bs-light) !important;
}

/* Set larger icon sizes for featured board */
#boardList button.featured-board .board-list-menu,
#boardList button.featured-board .board-robot-icon,
#boardList button.featured-board .bi-three-dots-vertical {
    font-size: 1.75rem;
}

/* Default state for non-active items */
#boardList button:not(.featured-board),
#boardList button:not(.featured-board) .board-list-menu,
#boardList button:not(.featured-board) .board-robot-icon,
#boardList button:not(.featured-board) .star-icon,
#boardList button:not(.featured-board) .bi-three-dots-vertical,
#boardList button:not(.featured-board) .dropdown-toggle::after {
    color: var(--bs-dark-border-subtle);
    transition: color 0.2s ease;
}

/* Background hover effect for non-active items */
#boardList button:not(.featured-board):hover {
    background-color: var(--bs-dark-text-emphasis);
}

/* Individual hover effect - only brighten the specific item being hovered */
#boardList button:not(.featured-board):hover,
#boardList button:not(.featured-board):hover .board-list-menu,
#boardList button:not(.featured-board):hover .board-robot-icon,
#boardList button:not(.featured-board):hover .star-icon,
#boardList button:not(.featured-board):hover .bi-three-dots-vertical,
#boardList button:not(.featured-board):hover .dropdown-toggle::after {
    color: var(--bs-light) !important;
}

/* Left border indicator */
#boardList button::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 4px;
    height: 100%;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px 0 0 2px;
    transition: background-color 0.2s ease;
}

/* Hover effects for left border - non-active items only */
#boardList button:not(.featured-board):hover::before {
    background: var(--bs-primary);
    box-shadow: 0 0 8px var(--bs-primary);
}

/* First item's left border is always active */
#boardList button.featured-board::before {
    background: rgba(255, 255, 255, 0.7);
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.4),
                0 0 20px rgba(255, 255, 255, 0.2);
}

/* Board icons styling */
.board-icons {
    display: inline-flex;
    gap: 8px;
    margin-left: 12px;
    opacity: 0;
    transition: opacity 0.2s ease;
    align-items: center;
}

#boardTitle {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    position: relative;
    padding-left: 0;
}

#boardTitle:hover .board-icons {
    opacity: 1;
}

/* Media queries for mobile */
@media (max-width: 768px) {
    .board-container {
        flex-direction: column;
        gap: 1rem;
    }

    .board-list-section {
        min-width: 100%;
        height: auto;
        max-height: calc((60px * 5) + 3.5rem);
        padding-right: 1rem;
        overflow: hidden; /* Contain the scrolling child */
        display: flex;
        flex-direction: column;
    }

    #boardList {
        flex: 1;
        overflow-y: auto;
        padding-right: 8px;
        margin-right: -8px;
        -webkit-appearance: none;
        -webkit-overflow-scrolling: touch;
        height: 100%; /* Take up full height of parent */
        min-height: 0; /* Allow flex shrinking */
    }

    #boardTitle {
        display: flex;
        align-items: center;
        gap: 8px;
        min-height: 36px;
        position: relative;
        padding-left: 1rem;
    }
}

/* Mobile-specific adjustments */
@media (max-width: 768px) {
    #boardList::-webkit-scrollbar {
        width: 8px;
        display: block;
    }

    /* Add mobile-specific scrollbar thumb styling to match desktop */
    #boardList::-webkit-scrollbar-thumb {
        background-color: transparent;
        border: 2px solid var(--bs-primary);
        min-height: 100px;
        border-radius: 10px;
    }

    #boardList::-webkit-scrollbar-thumb:hover {
        background-color: rgba(var(--bs-primary-rgb), 0.25);
        border-width: 2px;
    }

    #boardList {
        padding-right: 8px;
        margin-right: -8px;
        -webkit-appearance: none;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain; /* Prevent pull-to-refresh */
    }
}

.board-list-section h2 {
    margin-top: 0.05rem;
    margin-bottom: 1rem;
    padding-left: 0.5rem;
}

.board-drag-handle {
    cursor: grab;
    padding: 0 8px;
    color: var(--bs-light);
    opacity: 0.5;
    transition: opacity 0.2s;
    font-size: 1.2rem;
    user-select: none;
}

.board-drag-handle:hover {
    opacity: 1;
}
.board-drag-handle:active {
    cursor: grabbing;
}

.list-group-item {
    display: flex;
    align-items: center;
}

.list-group-item.dragging {
    opacity: 0.5;
    background-color: var(--bs-primary);
}

.board-list .list-group-item {
    background-color: transparent;
    border: none;
    color: var(--bs-body-color);
    padding: 1.25rem 1.5rem;  /* Original larger padding */
    transition: background-color 0.2s;
    font-size: 0.95rem;       /* Original font size */
    line-height: 1.5;         /* Original line height */
    font-weight: 400;         /* Original font weight */
}

.board-list .list-group-item:hover {
    background-color: var(--bs-dark);
}

.board-list .list-group-item.active {
    background-color: var(--bs-dark);
    border-color: transparent;
}

/* Update dropdown menu item hover styles */
.board-list .dropdown-menu .dropdown-item:hover,
.board-list .dropdown-menu .dropdown-item:focus {
    background-color: var(--bs-primary);  /* Use Bootstrap's primary color (purple) */
    color: var(--bs-light);              /* Light text color for contrast */
}

/* Add these board-specific styles from layout.css */
#columns {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    padding-bottom: 1rem;
    align-items: flex-start;
}

.board-list-section {
    flex: 0 0 300px;
}

#boardList {
    margin-bottom: 1rem;
}

.board-loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: transparent !important;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

#currentBoard {
    position: relative;
    min-height: 200px;
    background: transparent !important;
}

#currentBoard.content-loaded .board-loading-overlay {
    display: none;
}

/* Add board-specific media queries */
@media (max-width: 768px) {
    .board-container {
        flex-direction: column;
    }

    .board-list-section {
        flex: none;
        width: 100%;
        padding-right: 0.5rem;
    }

    #columns {
        flex-direction: column;
        padding-bottom: 0;
    }

    .add-column-container {
        display: none !important;
    }

    /* Mobile accordion-like behavior */
    #boardList button:not(.featured-board) {
        display: none !important;
    }

    #boardList.show-board-list button:not(.featured-board) {
        display: block !important;
    }

    /* Hide non-active boards by default in mobile */
    .non-active-boards {
        display: none !important;
    }

    /* Show non-active boards when parent has show-board-list class */
    #boardList.show-board-list .non-active-boards {
        display: block !important;
    }

    /* Toggle button for board list */
    .board-list-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        padding: 0.5rem;
        margin-top: -0.5rem;
        background: transparent;
        border: none;
        color: var(--bs-light);
        opacity: 0.7;
        transition: opacity 0.2s;
    }

    .board-list-toggle:hover {
        opacity: 1;
    }

    .board-list-toggle i {
        transition: transform 0.2s;
    }

    #boardList.show-board-list .board-list-toggle i {
        transform: rotate(180deg);
    }
}

/* Desktop mode - ensure all board list items are visible */
@media (min-width: 769px) {
    /* Override mobile-specific hiding rules for desktop */
    #boardList button {
        display: flex !important;
        visibility: visible !important;
        height: auto !important;
        overflow: visible !important;
    }

    /* Ensure non-active boards are visible in desktop */
    .non-active-boards {
        display: block !important;
    }

    /* Hide mobile toggle button in desktop */
    .board-list-toggle {
        display: none !important;
    }
}

/* Web view search container styles */
#searchContainer {
    padding-left: 1rem;
    margin-right: 0;
    background-color: var(--bs-dark);
    visibility: hidden;
    opacity: 0;
    transition: none;
    display: none;  /* Hide by default */
}

/* Only show in web view */
@media (min-width: 769px) {
    #searchContainer {
        display: block;  /* Allow display in web view */
    }

    #searchContainer:not(.d-none) {
        visibility: visible;
        opacity: 1;
        transition: opacity 0.2s ease-out;
    }
}

/* Force hide in mobile view regardless of state */
@media (max-width: 768px) {
    #searchContainer {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }
}

#searchContainer.d-none {
    visibility: hidden;
    opacity: 0;
    transition: none;
}

/* Only apply transitions when explicitly showing the search container */
#searchContainer:not(.d-none) {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.2s ease-out;
}

#searchContainer .input-group {
    min-width: 276px;
    width: auto;
}

#searchContainer .btn-outline-secondary {
    opacity: 1 !important;
    border-color: rgba(255, 255, 255, 0.1);
    color: var(--bs-light);
}

#searchContainer .btn-outline-secondary:hover {
    background-color: var(--bs-dark-text-emphasis);
    border-color: rgba(255, 255, 255, 0.2);
}

/* Mobile styles */
@media (max-width: 768px) {
    #searchContainer {
        display: none !important;
    }

    .add-column-container {
        display: none !important;
    }
}

/* Update search icon styles */
.search-icon {
    font-size: 1.5rem;
    line-height: 1;
    margin-right: 0.25rem;
    color: var(--bs-light);
    opacity: 0.8;
    transition: opacity 0.2s ease;
    text-decoration: none !important;
}

.search-icon:hover {
    opacity: 1;
    color: var(--bs-light);
}

.search-icon i {
    font-size: 1.5rem;
}

/* Add mobile search container styles */
.mobile-search-container {
    padding-left: 1rem;
    background-color: var(--bs-dark);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); 
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    padding-left: 0.5rem;
}

.mobile-search-container .input-group {
    height: 38px;
}

/* Update mobile styles */
@media (max-width: 768px) {
    .board-list-section h2 {
        margin-bottom: 0rem;  /* Reduce bottom margin of h2 */
        margin-top: 0rem;
    }

    .mobile-search-container {
        margin-top: 0;  /* Remove negative margin */
    }

    .mobile-search-container .input-group {
        height: 38px;
    }
}

/* Star icon styles */
.star-icon {
    color: inherit;  /* Match parent text color */
    opacity: 1;
    transition: all 0.2s;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5em;
    text-decoration: none !important;
}

.star-icon:hover {
    opacity: 1;
    text-decoration: none !important;
    color: var(--bs-primary);
}

.star-icon i {
    font-size: 1.5em;
    vertical-align: middle;
    line-height: 1;
    color: inherit;
}

/* Specific size for board list star icons */
#boardList .star-icon i {
    font-size: 1em;
}

/* Show outlined star on hover for non-favorite boards */
#boardList button:hover .far.fa-star {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Board list menu icon */
.board-list-menu {
    font-size: 1rem;
    color: var(--bs-dark-border-subtle);
    opacity: 0.7;
    transition: opacity 0.2s;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
}

#boardList button:hover .board-list-menu {
    opacity: 1;
    color: var(--bs-light);
    text-decoration: none !important;
}

/* Board list menu styles */
#boardList .dropdown {
    position: absolute;
    top: 0.75rem;  /* Match the board list item's padding */
    right: 1.25rem;  /* Match the board list item's right padding */
}

.board-list-menu {
    color: inherit;
    opacity: 0.7;
    transition: opacity 0.2s;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    font-size: 1rem;
}

.board-list-menu:hover {
    opacity: 1;
    color: var(--bs-light);
    text-decoration: none !important;
}

#boardList .dropdown-menu {
    min-width: 200px;
    padding: 0;
    margin-top: -0.5rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

#boardList .dropdown-item {
    padding: 0.5rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--bs-dark-border-subtle);
}

#boardList .dropdown-item:hover {
    background-color: var(--bs-primary);
    color: var(--bs-light);
}

#boardList .menu-icon {
    opacity: 0.7;
    font-size: 1.1rem;
}

#boardList .dropdown-item:hover .menu-icon {
    opacity: 1;
}

/* Robot icon for active board */
.board-robot-icon {
    position: absolute;
    bottom: 0.75rem;
    right: 1.2rem;
    font-size: 1rem;
    opacity: 0.7;
    color: inherit;
    text-decoration: none !important;
    transition: opacity 0.2s;
}

.board-robot-icon:hover {
    opacity: 1;
    color: inherit;
    text-decoration: none !important;
}

#boardList button.featured-board .board-robot-icon {
    opacity: 1;
}

.board-list-toggle-btn {
    padding: 0.25rem 0.75rem !important;
    font-size: 0.875rem !important;
    line-height: 1.2 !important;
    font-style: italic !important;
}

/* Update the toggle button styles to better indicate hover interaction */
.board-list-toggle-btn.collapsed {
    cursor: pointer;
    transition: transform 0.3s ease, padding-right 0.3s ease, background-color 0.2s ease;
}

.board-list-toggle-btn.collapsed:hover {
    background-color: var(--bs-secondary);
    box-shadow: 0 0 10px rgba(var(--bs-secondary-rgb), 0.3);
}

/* Add a subtle indicator arrow */
.board-list-toggle-btn.collapsed::after {
    content: '';
    position: absolute;
    left: -4px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-right: 4px solid var(--bs-light);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.board-list-toggle-btn.collapsed:hover::after {
    opacity: 1;
}

/* Note: All redundant #boardList button:first-child rules have been removed as they were duplicating .featured-board functionality */

#boardList button:not(.featured-board) > span {
    padding-right: 1.25rem;
}

/* Search styles */
#boardList.search-active {
    opacity: 1;
    visibility: visible;
}

#boardList.mobile-search {
    width: 100%;
    max-width: none;
    padding: 1rem;
}

.board-list-section.search-active {
    opacity: 1;
    visibility: visible;
}

.board-list-section.mobile-search {
    width: 100%;
    max-width: none;
}

/* Search result styles */
#boardList button.search-match,
#boardList button.search-match .board-list-menu,
#boardList button.search-match .board-robot-icon,
#boardList button.search-match .star-icon,
#boardList button.search-match .bi-three-dots-vertical,
#boardList button.search-match .dropdown-toggle::after,
#boardList button.search-match > span {
    display: flex !important;
    color: var(--bs-white) !important;
}

#boardList button.search-match {
    background-color: var(--bs-dark) !important;
}

/* Search styles */
#boardList.show-board-list {
    opacity: 1;
    visibility: visible;
}

/* Mobile search styles */
@media (max-width: 767px) {
    #boardList.mobile-search {
        width: 100%;
        max-width: none;
        padding: 1rem;
    }

    .board-list-section.mobile-search {
        width: 100%;
        max-width: none;
    }

    #boardList button.search-match {
        display: flex !important;
        color: var(--bs-light) !important;
    }
}

.search-container {
    left: 35px;
    z-index: 1000;
}

/* Web view styles */
@media (min-width: 769px) {
    #searchContainer.d-none {
        display: none !important;
    }

    .add-column-container.d-none {
        display: none !important;
    }
}

/* Search container styling */
#mobileSearchContainer, #webSearchContainer {
    transition: all 0.2s ease-out;
}

/* Web view styles */
@media (min-width: 768px) {
    #webSearchContainer {
        width: 300px !important;
        margin: 0;
    }

    #webSearchContainer .input-group {
        width: 300px;
    }

    #webSearchContainer:not(.d-none) {
        display: flex !important;
        opacity: 1;
        transform: translateY(0);
    }

    #webSearchContainer.d-none {
        opacity: 0;
        transform: translateY(-10px);
        pointer-events: none;
    }

    /* Hide search icon only in web view when search is visible */
    #webSearchContainer:not(.d-none) ~ .search-icon {
        display: none;
    }
}

/* Mobile view styles */
@media (max-width: 767px) {
    #mobileSearchContainer {
        width: 100% !important;
        margin: 0.5rem 0;
    }

    #mobileSearchContainer .input-group {
        width: 100%;
    }

    #webSearchContainer {
        display: none !important;
    }

    /* Always show search icon in mobile view */
    .search-icon {
        display: flex !important;
    }
}

/* Update search icon styles */
.search-icon {
    font-size: 1.5rem;
    line-height: 1;
    margin-right: 0.25rem;
    color: var(--bs-light);
    opacity: 0.8;
    transition: opacity 0.2s ease;
    text-decoration: none !important;
}

.search-icon:hover {
    opacity: 1;
    color: var(--bs-light);
}

.search-icon i {
    font-size: 1.5rem;
}

/* Web search styles - override desktop display rules during search */
@media (min-width: 768px) {
    /* When board list has show-board-list class in web view (search active) 
       - this selector is used by the more specific rules below */
    
    /* Hide non-matching boards in web search - higher specificity to override desktop rules */
    #boardList.show-board-list:not(.mobile-search) button:not(.search-match):not(.featured-board) {
        display: none !important;
        visibility: hidden !important;
    }
    
    /* Ensure search matches are visible and styled in web view */
    #boardList.show-board-list:not(.mobile-search) button.search-match {
        display: flex !important;
        visibility: visible !important;
        background: rgba(var(--bs-primary-rgb), 0.1) !important;
        background-color: rgba(var(--bs-primary-rgb), 0.1) !important;
        box-shadow: 0 0 10px rgba(var(--bs-primary-rgb), 0.2) !important;
        color: var(--bs-light) !important;
        border: 1px solid rgba(var(--bs-primary-rgb), 0.3) !important;
        margin-bottom: 0.25rem !important;
    }
    
    /* Style all elements within web search matches */
    #boardList.show-board-list:not(.mobile-search) button.search-match .board-list-menu,
    #boardList.show-board-list:not(.mobile-search) button.search-match .board-robot-icon,
    #boardList.show-board-list:not(.mobile-search) button.search-match .star-icon,
    #boardList.show-board-list:not(.mobile-search) button.search-match .bi-three-dots-vertical,
    #boardList.show-board-list:not(.mobile-search) button.search-match .dropdown-toggle::after,
    #boardList.show-board-list:not(.mobile-search) button.search-match > span {
        display: flex !important;
        color: var(--bs-white) !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    /* Ensure featured board remains visible in web search */
    #boardList.show-board-list:not(.mobile-search) button.featured-board {
        display: flex !important;
        visibility: visible !important;
    }
    
    /* Style the no-results message for web view */
    #boardList.show-board-list:not(.mobile-search) .no-results {
        display: block !important;
        padding: 1rem !important;
        text-align: center !important;
        color: var(--bs-secondary) !important;
        font-style: italic !important;
        background: rgba(var(--bs-secondary-rgb), 0.1) !important;
        border-radius: 0.375rem !important;
        margin: 0.5rem 0 !important;
    }
}

/* Ensure the board list section width is consistent */
@media (min-width: 769px) {
    .board-list-section {
        flex: 0 0 350px;
        width: 350px;
    }
}

/* Desktop-only search button styles */
@media (min-width: 1280px) {
    .header-full-buttons {
        display: inline-block !important;
    }
}

@media (max-width: 1279.98px) {
    .header-full-buttons {
        display: none !important;
    }
}

/* Add column container button icon spacing */
.add-column-container .btn i {
    margin-right: 0.5rem;
}

.add-column-container .btn i.me-0 {
    margin-right: 0 !important;
}

/* Prevent layout disruption during board selection */
body.board-selection-in-progress #boardList {
    pointer-events: none;
    transition: none !important;
}

body.board-selection-in-progress #boardList button {
    transition: none !important;
    transform: none !important;
}

/* Smooth transitions for normal operations */
#boardList:not(.board-selection-in-progress) button {
    transition: all 0.2s ease;
}