/* Responsive Design Adjustments */

/* Reduce UI size on smaller screens for better readability */
@media (max-width: 768px) {
    body {
        font-size: 0.9rem;
    }

    .display-4 {
        font-size: 2rem;
    }

    .btn {
        padding: 0.3rem 0.6rem;
        font-size: 0.8rem;
    }
}

/* Make map/settings dropdowns scrollable on mobile */
@media (max-width: 768px) {
    #map-settings-dropdown .dropdown-menu,
    .line-visibility-controls,
    .line-station-circle-visibility-controls {
        max-height: 250px;
        overflow-y: auto;
    }

    #sidebarMenu {
        position: fixed;
        top: 56px; /* Height of the new navbar */
        left: 0;
        bottom: 0;
        z-index: 1000;
        width: 100%;
        max-width: 250px;
        padding-top: 1rem;
    }
}

@media (max-width: 767.98px) {
    .top-left-container {
        top: 10px;
        left: 50%;
        transform: translateX(-50%);
        width: 95%;
        flex-direction: column;
        align-items: center;
    }

    #map-info-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        padding: 5px;
        border-radius: 8px;
        margin-bottom: 5px;
    }

    #current-time,
    #current-fare {
        font-size: 0.8rem;
        margin-bottom: 5px;
    }

    #line-status-icons-container {
        justify-content: center;
        flex-wrap: wrap;
        width: 100%;
    }

    #fare-info-container {
        flex-direction: row;
        justify-content: center;
        gap: 10px;
        background-color: transparent;
        border: none;
        padding: 0;
    }

    .transport-selector-mobile {
        justify-content: center;
        width: 100%;
        margin-bottom: 5px;
    }

    #line-icons-row-container {
        width: 100%;
        order: 3;
    }
}

.station-popup-container .line-icon-tab {
    height: 20px;
    width: auto;
}

.station-popup-container .line-icon-title {
    height: 24px;
    width: auto;
    margin-right: 4px;
    vertical-align: middle;
}

@media (max-width: 767.98px) {
    .mobile-search-expanded {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: var(--background-color-light, #fff);
        z-index: 1050;
        flex-direction: column;
    }

    .mobile-search-header {
        display: flex;
        align-items: center;
        padding: 10px;
        border-bottom: 1px solid #ddd;
    }

    .search-input-container {
        flex-grow: 1;
        position: relative;
        display: flex;
        align-items: center;
        background-color: #f1f1f1;
        border-radius: 20px;
        padding: 0 10px;
    }

    #search-input-expanded {
        border: none;
        background: transparent;
        width: 100%;
        padding: 10px 25px 10px 5px;
        outline: none;
    }

    .search-input-container .search-icon {
        position: absolute;
        left: 15px;
        color: #888;
    }

    #search-clear-btn {
        position: absolute;
        right: 10px;
    }

    .search-results-list {
        overflow-y: auto;
        flex-grow: 1;
    }
}

@media (max-width: 767.98px) {
    #header-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    #search-container {
        width: 90%;
        margin-bottom: 5px;
    }

    #social-icons-container,
    #header-links {
        display: none;
    }

    .transport-selector {
        margin-top: 5px;
    }
}

/* Forum Layout on Mobile */
@media (max-width: 768px) {
    .forum-main-content {
        grid-template-columns: 1fr !important;
    }

    .reply-btn .reply-text {
        display: none;
    }
}

/* Ensure line icons do not wrap on larger screens */
@media (min-width: 768px) {
    .line-icons-row {
        flex-wrap: nowrap !important;
        overflow-x: auto;
    }
}

/* Center the top center container on mobile screens */
@media (max-width: 767.98px) {
    #map-top-center-container {
        top: 65px; /* Position it just below the top bar */
        left: 50%;
        transform: translateX(-50%);
        width: auto; /* Let content define width */
        max-width: 95%;
        flex-direction: column;
        align-items: center;
        gap: 5px; /* Add some space between stacked items */
    }

    #map-top-center-container > * {
        transform: scale(0.9); /* Scale down the elements slightly */
        transform-origin: center;
    }
}

/* Make notifications dropdown scrollable on mobile and truncate long text */
@media (max-width: 768px) {
    #notifications-dropdown.dropdown-menu {
        max-height: 300px; /* Adjust as needed */
        overflow-y: auto;
    }
}

.notification-message {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 250px; /* Adjust as needed for your layout */
}