/* Mobile-specific styles that can be loaded conditionally */
@media (max-width: 768px) {
    body {
        font-size: 14px;
        line-height: 1.4;
    }

    /* Layout padding */
    .container {
        padding: 0 10px;
    }

    /* Images */
    img {
        max-width: 100%;
        height: auto;
    }

    /* =========================
       NAVBAR / HEADER (MOBILE)
       Make mobile resemble desktop layout
       ========================= */

    /* Many pages use a header wrapper like:
       <header class="header-content">
         <div class="top-row">...
         <div class="board-links-container">...
       This section targets BOTH that structure and the older #navbar structure.
    */

    /* --- Primary header grid (logo | search | auth/profile) --- */
    .header-content .top-row,
    #navbar {
        display: grid;
        grid-template-columns: auto auto;
        grid-template-areas:
            "logo actions"
            "balance balance"
            "search search"
            "boards boards";
        grid-auto-rows: auto;
        align-items: center;
        gap: 8px 10px;
        padding: 10px 10px;
    }

    .header-content .logo-container {
        grid-area: logo;
    }

    .header-content .right-section,
    #navbar .profile-section,
    #navbar .auth-links,
    #navbar .nav-auth {
        grid-area: actions;
    }
    .header-content .wallet-balance,
    .header-content .wallet-balance-pill,
    #navbar .wallet-balance,
    #navbar .wallet-balance-pill {
        grid-area: balance;
        justify-self: start;
        width: 100%;
        margin-top: 4px;
    }

    .header-content .search-container,
    #navbar form {
        grid-area: search;
        width: 100%;
    }

    .header-content .board-links-container,
    #navbar .nav-links,
    #navbar .board-links,
    #navbar .boards-row,
    #navbar .navbar-links {
        grid-area: boards;
    }

    /* Keep logo compact */
    .header-content .logo-container img,
    #navbar .logo,
    #navbar img[alt="4chain"],
    #navbar .brand-logo,
    #navbar .navbar-brand img {
        max-width: 160px;
        height: auto;
        display: block;
    }

    /* --- Search: make the input fill the middle column --- */
    .header-content .search-container,
    #navbar form {
        width: 100%;
        max-width: 100%;
        margin: 0;
    }

    .header-content .search-container input,
    #navbar input[type="search"],
    #navbar input.search,
    #navbar .search-bar,
    #navbar .search-input {
        width: 100%;
        max-width: 100%;
        min-height: 36px;
        padding: 8px 12px;
        border-radius: 10px;
    }

    /* If you render a separate search icon/button, keep it from pushing layout */
    .header-content .search-container .search-icon,
    .header-content .search-container button,
    .header-content .search-container i {
        flex-shrink: 0;
    }

    /* --- Right side: auth/profile/controls should stay on ONE line --- */
    .header-content .right-section,
    #navbar .profile-section,
    #navbar .auth-links,
    #navbar .auth,
    #navbar .nav-auth {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 10px;
        width: auto;
        margin: 0;
        white-space: nowrap;
        min-width: 0;
    }

    .header-content .right-section .balance,
    .header-content .right-section .balance-display,
    .header-content .right-section [class*="balance"],
    #navbar [class*="balance"] {
        white-space: normal;
        overflow: visible;
        text-overflow: unset;
        max-width: 100%;
        font-size: 0.9rem;
    }
    .header-content .wallet-balance-pill,
    #navbar .wallet-balance-pill {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 6px 10px;
        border-radius: 12px;
    }

    /* Buttons in the header: compact like desktop */
    .header-content .right-section .btn,
    #navbar .btn,
    #navbar a.btn,
    #navbar button.btn {
        padding: 6px 12px;
        font-size: 0.95rem;
        line-height: 1.1;
    }

    /* If there is a big Sign Up link, keep it aligned with Log In */
    .header-content .right-section a,
    #navbar a {
        line-height: 1.2;
    }

    /* --- Second row: board links (horizontal scroll, single line) --- */
    .header-content .board-links-container,
    #navbar .nav-links,
    #navbar .board-links,
    #navbar .boards-row,
    #navbar .navbar-links {
        display: flex;
        align-items: center;
        gap: 14px;
        overflow-x: auto;
        white-space: nowrap;
        padding: 6px 2px 2px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .header-content .board-links-container::-webkit-scrollbar,
    #navbar .nav-links::-webkit-scrollbar,
    #navbar .board-links::-webkit-scrollbar,
    #navbar .boards-row::-webkit-scrollbar,
    #navbar .navbar-links::-webkit-scrollbar {
        display: none;
    }

    /* Keep the Discord/Chat toggle reachable but compact */
    #discord-chat-toggle,
    .header-content #discord-chat-toggle {
        justify-self: end;
    }

    .header-content .chat-toggle,
    #navbar .chat-toggle {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 4px 8px;
        border-radius: 12px;
    }

    /* Old templates sometimes have lots of direct anchors in #navbar.
       Reduce their size and prevent tall wrapping.
    */
    #navbar > a {
        font-size: 0.95rem;
        line-height: 1.2;
    }

    /* Final safety: don’t let header overflow create weird extra rows */
    .header-content,
    #navbar {
        overflow: hidden;
    }

    /* =========================
       HOME PAGE SECTIONS
       ========================= */

    .board-title {
        font-size: 1.2rem;
        text-align: center;
    }

    /* News Updates */
    #newsUpdates {
        padding: 10px 0;
    }

    /* Popular posts grid → horizontal scroll */
    .popular-posts,
    .popular-posts-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .popular-post,
    .popular-post-card {
        min-width: 0;
    }

    /* Make images/cards fill their grid cell nicely */
    .popular-post img,
    .popular-post-card img {
        width: 100%;
        height: auto;
        display: block;
    }

    /* Catalog overview grid */
    .catalog-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    /* Tables */
    table {
        font-size: 0.8rem;
    }

    /* Forms */
    input,
    textarea,
    select {
        font-size: 16px;
        padding: 10px;
    }
    /* =========================
    WALLET BALANCE + DEPOSIT
    MOBILE FIX
    ========================= */

    /* Force header grid to allow extra rows */
    .header-content .top-row {
        grid-template-columns: auto auto;
        grid-template-areas:
            "logo actions"
            "wallet wallet"
            "deposit deposit"
            "search search"
            "boards boards";
    }

    /* Wallet balance: full-width row */
    .header-content .wallet-balance-pill,
    .header-content .wallet-balance {
        grid-area: wallet;
        width: 100%;
        margin: 6px 0 2px;
        justify-content: center;
        white-space: normal;
        text-align: center;
    }

    /* Prevent truncation */
    .header-content .wallet-balance-pill *,
    .header-content .wallet-balance * {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: unset !important;
    }

    /* Deposit button: its own row */
    .header-content .deposit-btn,
    .header-content a.deposit-btn {
        grid-area: deposit;
        width: 100%;
        margin-top: 4px;
        justify-content: center;
    }

    /* Make Deposit button not fight profile dropdown */
    .header-content .right-section .deposit-btn {
        order: 99;
    }

    /* Safety: never overlap logo */
    .header-content .logo-container {
        z-index: 2;
    }
    /* =========================
       PROFILE DROPDOWN (MOBILE)
       Make sure items like Logout are visible
       ========================= */

    /* Your dropdown uses `.dropdown-menu.header-dropdown-menu` */
    .header-dropdown-menu,
    .profile-dropdown .dropdown-menu,
    .dropdown-menu.header-dropdown-menu {
        /* Keep the menu within the visible viewport */
        max-height: calc(100vh - 140px);
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;

        /* Prevent clipping behind other header elements */
        z-index: 99999;

        /* Give the last item breathing room (safe area on iOS) */
        padding-bottom: calc(10px + env(safe-area-inset-bottom));
    }

    /* Make sure each item is comfortably tappable */
    .header-dropdown-menu .dropdown-item,
    .profile-dropdown .dropdown-item,
    .dropdown-item.header-item {
        padding: 12px 14px;
        line-height: 1.2;
        white-space: nowrap;
    }

    /* If the menu is positioned too low and gets cut off, anchor it to the right */
    .profile-dropdown {
        position: relative;
        z-index: 99999;
    }

    .profile-dropdown .dropdown-menu,
    .dropdown-menu.header-dropdown-menu {
        right: 0;
        left: auto;
    }

}