/*
 * VefaConnect — navbar_search.css
 *
 * Loupe navbar + overlay de recherche globale. Charge automatiquement les
 * tokens --vefa-* via tokens.css (chargé globalement dans base.html).
 */

/* ============================================================== *
 * 1. Bouton loupe (trigger desktop + mobile)
 * ============================================================== */

.navbar-search-trigger {
    display: inline-flex;
    align-items: center;
    gap: var(--vefa-space-2, 8px);
    background: transparent;
    border: 1px solid var(--vefa-border, #e2e8f0);
    color: var(--vefa-text-muted, #475569);
    cursor: pointer;
    border-radius: var(--vefa-radius-pill, 999px);
    padding: 6px 10px;
    font-size: 0.9rem;
    transition: background-color var(--vefa-duration-base, 250ms) var(--vefa-ease, ease),
                color var(--vefa-duration-base, 250ms) var(--vefa-ease, ease),
                border-color var(--vefa-duration-base, 250ms) var(--vefa-ease, ease);
    flex: 0 0 auto;
}

.navbar-search-trigger:hover,
.navbar-search-trigger:focus-visible {
    color: var(--vefa-accent);
    border-color: var(--vefa-accent);
    background-color: var(--vefa-accent-soft);
    outline: none;
}

.navbar-search-trigger .fa-search {
    font-size: 0.95rem;
}

.navbar-search-trigger__hint {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-left: 4px;
    font-size: 0.7rem;
    color: var(--vefa-text-subtle, #94a3b8);
}

.navbar-search-trigger__hint kbd {
    /* color + background explicites pour battre la règle Bootstrap
       (`kbd { color: var(--bs-body-bg); background-color: var(--bs-body-color); }`)
       qui rendrait le texte blanc sur fond noir au lieu de fond clair lisible. */
    color: var(--vefa-text-muted, #475569);
    background-color: var(--vefa-bg-muted, #f1f5f9);
    border: 1px solid var(--vefa-border, #e2e8f0);
    border-radius: 4px;
    padding: 1px 4px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.65rem;
    line-height: 1;
}

/* Mobile : on retire le hint Cmd+K (tactile, pas pertinent) et on
   compacte le bouton en cercle pur. */
.navbar-search-trigger--mobile {
    border: none;
    padding: 6px;
    width: 36px;
    height: 36px;
    justify-content: center;
}

.navbar-search-trigger--mobile:hover,
.navbar-search-trigger--mobile:focus-visible {
    background-color: var(--vefa-accent-soft);
    color: var(--vefa-accent);
    border-color: transparent;
}

.navbar-search-trigger--mobile .fa-search {
    font-size: 1rem;
}

/* ============================================================== *
 * 2. Overlay (backdrop full-screen)
 * ============================================================== */

.navbar-search-overlay {
    position: fixed;
    inset: 0;
    background-color: var(--vefa-overlay, rgba(15, 23, 42, 0.5));
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 9000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 10vh 16px 32px;
    overflow-y: auto;
    animation: navbarSearchOverlayIn var(--vefa-duration-base, 250ms) var(--vefa-ease-out, ease-out);
}

.navbar-search-overlay[hidden] {
    display: none;
}

/* Quand l'overlay est ouvert, on bloque le scroll du body */
body.navbar-search-open {
    overflow: hidden;
}

@keyframes navbarSearchOverlayIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ============================================================== *
 * 3. Panel central
 * ============================================================== */

.navbar-search-panel {
    width: 100%;
    max-width: 640px;
    background-color: var(--vefa-surface, #ffffff);
    border-radius: var(--vefa-radius-lg, 16px);
    box-shadow: var(--vefa-shadow-xl, 0 20px 35px -10px rgba(15, 23, 42, 0.15));
    overflow: hidden;
    animation: navbarSearchPanelIn var(--vefa-duration-slow, 400ms) var(--vefa-ease-out, ease-out);
}

@keyframes navbarSearchPanelIn {
    from { opacity: 0; transform: translateY(-12px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.navbar-search-panel__header {
    display: flex;
    align-items: center;
    gap: var(--vefa-space-3, 12px);
    padding: var(--vefa-space-4, 16px) var(--vefa-space-5, 24px);
    border-bottom: 1px solid var(--vefa-border, #e2e8f0);
}

.navbar-search-panel__icon {
    color: var(--vefa-text-muted, #475569);
    font-size: 1.05rem;
    flex: 0 0 auto;
}

.navbar-search-input {
    flex: 1 1 auto;
    border: none;
    outline: none;
    background: transparent;
    font-size: 1.05rem;
    color: var(--vefa-text-strong, #020617);
    min-width: 0;
}

.navbar-search-input::placeholder {
    color: var(--vefa-text-subtle, #94a3b8);
}

.navbar-search-spinner {
    color: var(--vefa-text-subtle, #94a3b8);
    font-size: 0.9rem;
    flex: 0 0 auto;
    opacity: 0;
    transition: opacity var(--vefa-duration-fast, 150ms) var(--vefa-ease, ease);
}

.navbar-search-spinner.htmx-request {
    opacity: 1;
}

.navbar-search-close {
    background: transparent;
    border: none;
    color: var(--vefa-text-muted, #475569);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--vefa-radius-sm, 6px);
    transition: background-color var(--vefa-duration-fast, 150ms) var(--vefa-ease, ease),
                color var(--vefa-duration-fast, 150ms) var(--vefa-ease, ease);
    flex: 0 0 auto;
}

.navbar-search-close:hover,
.navbar-search-close:focus-visible {
    background-color: var(--vefa-bg-muted, #f1f5f9);
    color: var(--vefa-text-strong, #020617);
    outline: none;
}

/* ============================================================== *
 * 4. Résultats
 * ============================================================== */

.navbar-search-results {
    max-height: 60vh;
    overflow-y: auto;
    padding: var(--vefa-space-2, 8px) 0;
}

.navbar-search-hint {
    padding: var(--vefa-space-6, 32px) var(--vefa-space-5, 24px);
    text-align: center;
    color: var(--vefa-text-muted, #475569);
}

.navbar-search-hint__title {
    font-weight: var(--vefa-fw-semibold, 600);
    margin-bottom: 4px;
    color: var(--vefa-text, #0f172a);
}

.navbar-search-hint__sub {
    font-size: 0.9rem;
    color: var(--vefa-text-muted, #475569);
}

.navbar-search-section {
    padding: var(--vefa-space-3, 12px) 0;
    border-bottom: 1px solid var(--vefa-border-subtle, #f1f5f9);
}

.navbar-search-section:last-child {
    border-bottom: none;
}

.navbar-search-section__title {
    padding: 4px var(--vefa-space-5, 24px) 8px;
    font-size: 0.75rem;
    font-weight: var(--vefa-fw-bold, 700);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--vefa-text-subtle, #94a3b8);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.navbar-search-section__count {
    font-weight: var(--vefa-fw-normal, 400);
    text-transform: none;
    letter-spacing: 0;
    color: var(--vefa-text-subtle, #94a3b8);
}

.navbar-search-item {
    display: flex;
    align-items: center;
    gap: var(--vefa-space-3, 12px);
    padding: var(--vefa-space-3, 12px) var(--vefa-space-5, 24px);
    text-decoration: none;
    color: var(--vefa-text, #0f172a);
    transition: background-color var(--vefa-duration-fast, 150ms) var(--vefa-ease, ease);
}

.navbar-search-item:hover,
.navbar-search-item:focus-visible {
    background-color: var(--vefa-bg-muted, #f1f5f9);
    text-decoration: none;
    color: var(--vefa-text-strong, #020617);
    outline: none;
}

.navbar-search-item__thumb {
    width: 40px;
    height: 40px;
    border-radius: var(--vefa-radius-sm, 6px);
    object-fit: cover;
    background-color: var(--vefa-bg-muted, #f1f5f9);
    color: var(--vefa-text-muted, #475569);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.navbar-search-item__body {
    min-width: 0;
    flex: 1 1 auto;
}

.navbar-search-item__title {
    font-weight: var(--vefa-fw-semibold, 600);
    color: var(--vefa-text-strong, #020617);
    margin: 0;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.navbar-search-item__meta {
    font-size: 0.85rem;
    color: var(--vefa-text-muted, #475569);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.navbar-search-item__badge {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: var(--vefa-fw-semibold, 600);
    padding: 2px 8px;
    border-radius: var(--vefa-radius-pill, 999px);
    background-color: var(--vefa-accent-soft, rgba(255, 64, 0, 0.08));
    color: var(--vefa-accent, #ff4000);
    margin-right: 6px;
    vertical-align: middle;
}

.navbar-search-empty {
    padding: var(--vefa-space-6, 32px) var(--vefa-space-5, 24px);
    text-align: center;
    color: var(--vefa-text-muted, #475569);
}

.navbar-search-empty__title {
    font-weight: var(--vefa-fw-semibold, 600);
    color: var(--vefa-text, #0f172a);
    margin-bottom: 4px;
}

/* ============================================================== *
 * 5. Footer du panel
 * ============================================================== */

.navbar-search-panel__footer {
    display: flex;
    align-items: center;
    gap: var(--vefa-space-3, 12px);
    padding: var(--vefa-space-3, 12px) var(--vefa-space-5, 24px);
    border-top: 1px solid var(--vefa-border, #e2e8f0);
    font-size: 0.8rem;
    color: var(--vefa-text-subtle, #94a3b8);
    background-color: var(--vefa-bg-soft, #f8fafc);
}

.navbar-search-panel__shortcut {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.navbar-search-panel__shortcut kbd {
    /* color + background explicites pour battre la règle Bootstrap kbd (cf. .navbar-search-trigger__hint kbd) */
    color: var(--vefa-text-muted, #475569);
    background-color: var(--vefa-surface, #ffffff);
    border: 1px solid var(--vefa-border, #e2e8f0);
    border-radius: 4px;
    padding: 1px 6px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.7rem;
    line-height: 1;
}

.navbar-search-panel__advanced {
    margin-left: auto;
    color: var(--vefa-accent, #ff4000);
    text-decoration: none;
    font-weight: var(--vefa-fw-semibold, 600);
}

.navbar-search-panel__advanced:hover {
    text-decoration: underline;
    color: var(--vefa-accent-dark, #d93600);
}

/* ============================================================== *
 * 6. Responsive mobile
 * ============================================================== */

@media (max-width: 640px) {
    .navbar-search-overlay {
        padding: 0;
    }

    .navbar-search-panel {
        border-radius: 0;
        max-width: none;
        min-height: 100vh;
        min-height: 100dvh;
        box-shadow: none;
    }

    .navbar-search-panel__header {
        padding: 12px 16px;
    }

    .navbar-search-input {
        font-size: 1rem;
    }

    .navbar-search-section__title,
    .navbar-search-item,
    .navbar-search-hint,
    .navbar-search-panel__footer {
        padding-left: 16px;
        padding-right: 16px;
    }

    .navbar-search-results {
        max-height: none;
        flex: 1 1 auto;
    }

    .navbar-search-panel__footer {
        position: sticky;
        bottom: 0;
        padding-bottom: calc(12px + env(safe-area-inset-bottom));
    }
}