/* Mobile styles */
@media (max-width: 768px) {
    /* Adjust base body padding */
    body {
        padding-top: 8.5rem !important; /* Increased from 9rem to account for header height */
    }

    /* Adjust body padding when search is visible */
    body:has(#mobileSearchContainer:not(.d-none)) {
        padding-top: 14rem !important; /* Increased from 12rem to account for search bar */
    }

    /* Ensure header stays on top with solid background */
    .container-fluid header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1030;
        padding: 1rem !important;
        background: transparent;
/*        background-color: rgba(33, 37, 41, 0.9);   /* Fallback solid color */
    }
    
    /* Adjust padding for very small screens like iPhone 13 mini */
    @media (max-width: 375px) {
        .container-fluid header {
            padding: 1rem !important;
        }
    }
    
    /* Add the ::before pseudo-element for mobile header background */
    .container-fluid header::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
/*        background: linear-gradient(rgba(33, 37, 41, 0.4), rgba(33, 37, 41, 0.4)), url('/static/background1.jpg');
        background-size: cover;
        background-position: center top; /* Fixed position at top center */
/*        background-repeat: no-repeat;
        background-attachment: fixed; /* This is key - keeps background fixed while scrolling */
        z-index: -1;
        opacity: 1; /* Fully opaque */
    }
/*
    .container-fluid header {
        position: fixed;
        top: 0rem;
        left: 0;
        right: 0;
        margin: 0;
        padding: 0 1.5rem;
        padding-left: 1.25rem;   
        background: linear-gradient(rgba(33, 37, 41, 0.4), rgba(33, 37, 41, 0.4)), url('/static/background1.jpg');
        background-size: cover;
        background-position: top;
        background-attachment: fixed;
        z-index: 1000;
        height: 80px;
        display: flex;
        align-items: center; 
    }
  */  
    /* Adjust board container spacing */
    .board-container {
        flex-direction: column;
        gap: 1rem;
        margin-top: 1rem;
    }

    .board-list-section {
        min-width: 100%;
        max-height: none;
        padding-right: 0;
        flex: none;
        width: 100%;
    }

    #boardList {
        flex: 1;
        overflow-y: auto;
        padding-right: 8px;
        margin-right: -8px;
        -webkit-appearance: none;
        -webkit-overflow-scrolling: touch;
        margin-bottom: 0 !important;
    }

    /* Hide non-featured board items by default with higher specificity */
    #boardList button.list-group-item.list-group-item-action:not(.featured-board) {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Show non-featured items when toggled with higher specificity - but not during search */
    #boardList.show-board-list:not(.mobile-search) button.list-group-item.list-group-item-action:not(.featured-board) {
        display: flex !important;
        visibility: visible !important;
        height: auto !important;
        overflow: visible !important;
    /*    margin: 0.25rem 0 !important;  */
        padding: 0.75rem !important;
    }

    /* Keep toggle button visible and on top */
    .board-list-toggle {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 100%;
        padding: 0.25rem !important;
        margin: 0 !important;
        background: transparent;
        border: none;
        color: var(--bs-light);
        opacity: 0.7;
        transition: all 0.2s;
        font-size: 1.2rem;
        position: relative;
        z-index: 2;
    }

    .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);
    }

    /* Hide the old toggle button */
    .board-list-toggle-btn {
        display: none !important;
    }

    /* Hide featured board during mobile search */
    #boardList.show-board-list.mobile-search button.featured-board:not(.search-match) {
        display: none !important;
    }

    /* Allow search matches to be visible in mobile search mode */
    #boardList.show-board-list.mobile-search button.search-match {
        display: flex !important;
        visibility: visible !important;
        height: auto !important;
        overflow: visible !important;
        padding: 0.75rem !important;
        margin: 0 !important;
    }

    /* Force featured board to be visible when explicitly restored */
    #boardList button.featured-board.force-visible {
        display: flex !important;
        visibility: visible !important;
        height: auto !important;
        overflow: visible !important;
    }

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

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

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

/* Desktop mode overrides - ensure proper board list display when transitioning from mobile */
@media (min-width: 769px) {
    /* Override all mobile-specific hiding rules for desktop mode */
    #boardList button.list-group-item.list-group-item-action:not(.featured-board) {
        display: flex !important;
        visibility: visible !important;
        height: auto !important;
        overflow: visible !important;
        margin: 0.25rem 0 !important;
        padding: 0.75rem !important;
    }

    /* Ensure featured board is also visible in desktop */
    #boardList button.featured-board {
        display: flex !important;
        visibility: visible !important;
        height: auto !important;
        overflow: visible !important;
    }

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

    /* Show board content in desktop */
    #currentBoard {
        display: block !important;
    }

    /* Remove mobile search classes effects in desktop */
    #boardList.show-board-list.mobile-search button.featured-board:not(.search-match) {
        display: flex !important;
    }
}

/* Mobile search styles */
    #mobileSearchContainer {
        position: static !important;
        width: 80% !important;
        margin: 0.5rem auto 0 !important;
        background-color: var(--bs-dark) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    }

    /* Adjust body padding when search is visible */
    body:has(#mobileSearchContainer:not(.d-none)) {
        padding-top: 13rem !important; /* Increase padding to accommodate search bar */
    }

    #mobileSearchContainer:not(.d-none) {
        display: block !important;
    }

    #mobileSearchContainer .input-group {
        width: 100% !important;
        max-width: none !important;
    }

    #mobileSearchContainer input {
        background-color: var(--bs-dark) !important;
        border-color: rgba(255, 255, 255, 0.1) !important;
        color: var(--bs-light) !important;
    }

    /* Prevent iOS zoom on input focus */
    .mobile-search-input {
        font-size: 16px !important;
    }

    /* Hide desktop search in mobile */
    #searchContainer {
        display: none !important;
    }

    .search-icon {
        margin-left: 0.5rem !important;
    }

    #boardList button.featured-board {
        margin-bottom: 1.25rem !important;
        margin-right: 0 !important;
        padding-right: 1rem !important;
    }

    /* Remove the rule that forces robot icon to always be visible in mobile */
    /* Now the robot icon will follow the same hover behavior as in desktop */
}