/* ==========================================================================
   Navbar & nav tabs (Profil, ...)
   ========================================================================== */

.navbar {
    background-color: var(--bg) !important;
}

.navbar .navbar-brand {
    color: var(--accent) !important;
    font-weight: 600;
}

.navbar .navbar-brand:hover,
.navbar .navbar-brand:focus {
    color: var(--accent-hover) !important;
}

.navbar .nav-link {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--text-muted) !important;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus,
.navbar .nav-link.active {
    color: var(--accent) !important;
}

.nav-link-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.navbar .navbar-toggler {
    color: var(--text-muted);
    border-color: var(--border);
}

/* Collapsed burger menu (< 576px) — plain stacked text links are a poor touch
   target on a phone, so give each top-level item (Wiki/Fichiers/Pastes/
   File-Drop/Administration/user menu) *and* the user menu's own submenu
   items (Profil/Log out) a button-like block instead. Scoped to
   .navbar-collapse .navbar-nav so the unrelated site-search results
   dropdown (a sibling of .navbar-nav, not inside it) keeps its own look. */
@media (max-width: 575.98px) {
    .navbar-collapse {
        padding: 0.75rem 0 0.25rem;
    }

    .navbar-collapse .navbar-nav .nav-link,
    .navbar-collapse .navbar-nav .dropdown-item {
        padding: 0.65rem 1rem;
        margin-bottom: 0.4rem;
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        background-color: var(--bg-subtle);
    }

    .navbar-collapse .navbar-nav .nav-link:hover,
    .navbar-collapse .navbar-nav .nav-link:focus,
    .navbar-collapse .navbar-nav .nav-link.active,
    .navbar-collapse .navbar-nav .dropdown-item:hover,
    .navbar-collapse .navbar-nav .dropdown-item:focus,
    .navbar-collapse .navbar-nav .dropdown-item.active {
        background-color: var(--surface);
        border-color: var(--accent);
    }

    .navbar-collapse .navbar-nav .dropdown-menu {
        margin-bottom: 0.4rem;
    }
}

.navbar .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(26, 29, 35, 0.75)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

[data-theme="dark"] .navbar .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(232, 233, 235, 0.75)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.nav-tabs {
    border-bottom-color: var(--border);
}

.nav-tabs .nav-link {
    color: var(--text-muted);
}

.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
    color: var(--accent);
    border-color: var(--border) var(--border) var(--border);
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    color: var(--accent);
    background-color: var(--surface);
    border-color: var(--border) var(--border) var(--surface);
}

/* Admin/Profil sub-nav (_AdminNav, _ProfileNav) on a phone — the default tab
   strip wraps 3-4 short tabs into a cramped two-row grid with small hit
   areas. Below 576px, stack them as full-width button rows instead, same
   treatment as the collapsed burger menu items. */
@media (max-width: 575.98px) {
    .nav-tabs {
        flex-direction: column;
        flex-wrap: nowrap;
        border-bottom: none;
        gap: 0.4rem;
    }

    .nav-tabs .nav-item {
        width: 100%;
    }

    .nav-tabs .nav-link {
        width: 100%;
        padding: 0.65rem 1rem;
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        background-color: var(--bg-subtle);
    }

    .nav-tabs .nav-link:hover,
    .nav-tabs .nav-link:focus {
        border-color: var(--accent);
    }

    .nav-tabs .nav-link.active,
    .nav-tabs .nav-item.show .nav-link {
        border-color: var(--accent);
        background-color: var(--surface);
    }
}

/* Global search box (search.js manually toggles #site-search-results' "show" class — not a
   Bootstrap-JS-driven .dropdown, so the dropdown-menu positioning below is done by hand). */
.site-search {
    position: relative;
    min-width: 12rem;
}

.site-search .dropdown-menu {
    /* Auto-sized to the widest entry instead of pinned to the (narrow) input's width — min-width
       keeps it never narrower than the input itself. overflow-x: hidden (rather than the implicit
       "auto" that overflow-y: auto alone produces per spec) plus wrapping items below prevents the
       stray horizontal scrollbar under "Voir tous les résultats". */
    width: max-content;
    min-width: 100%;
    max-width: min(90vw, 28rem);
    max-height: 60vh;
    overflow-y: auto;
    overflow-x: hidden;
}

.site-search .dropdown-menu .dropdown-item {
    white-space: normal;
    word-break: break-word;
}