/**
 * DFB Andre Bibler — supplerende styling
 *
 * Vi genbruger 100% dfb-laesning.css' mega-* klasser. Det vi tilføjer her
 * er kun oversættelses-specifikke elementer:
 *   - Søgefelt øverst i menuen
 *   - Badges for scope (FULD/NT/GT/DELVIS)
 *   - Layout for item-rækker (navn + ID + badge)
 *   - Highlight på matching tekst under søgning
 *   - Et lille adskil mellem oversættelses-nav og bog/kapitel-nav
 */

/* ── Adskillelse mellem oversættelses-nav og resten ──────────────────── */
.dfb-andrebibler-wrap .dfb-andrebibler-trans-nav {
    margin-bottom: 0.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #e5e7eb;
}

/* Mobile/fallback select fylder hele bredden */
.dfb-andrebibler-wrap .dfb-andrebibler-trans-nav .dfb-select-wrap {
    flex: 1;
    min-width: 240px;
    max-width: 640px;
}
.dfb-andrebibler-wrap .dfb-andrebibler-trans-nav select.dfb-select {
    width: 100%;
}

/* ── Mobile vs Desktop visning ───────────────────────────────────────── */
/* Temaets CSS for dfb-select-mobile/dfb-select-desktop er kun bundet til
   bog- og kapitel-vælgernes ID'er — vi skal eksplicit definere reglerne
   for vores egen oversættelses-vælger. */

/* Default (desktop ≥ 720px): vis megamenu-knap, skjul select */
.dfb-andrebibler-wrap .dfb-andrebibler-trans-nav .dfb-mega-wrap select.dfb-select-mobile {
    display: none;
}
.dfb-andrebibler-wrap .dfb-andrebibler-trans-nav .dfb-mega-wrap .dfb-select-desktop {
    display: inline-flex;
}

/* Smal viewport: skjul megamenu-knap, vis select i stedet */
@media (max-width: 720px) {
    .dfb-andrebibler-wrap .dfb-andrebibler-trans-nav .dfb-mega-wrap select.dfb-select-mobile {
        display: block;
    }
    .dfb-andrebibler-wrap .dfb-andrebibler-trans-nav .dfb-mega-wrap .dfb-select-desktop {
        display: none;
    }
    .dfb-andrebibler-wrap .dfb-andrebibler-trans-nav .dfb-mega-wrap .dfb-mega-menu {
        display: none !important;
    }
}

/* ── Megamenu-bredde og placering ─────────────────────────────────────── */
.dfb-andrebibler-trans-mega.dfb-mega-menu {
    /* Eksplicit position, hvis temaet ikke styler dfb-mega-menu */
    position: absolute;
    z-index: 1000;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);

    /* Bredere end bog-mega'en så lange engelske navne ikke afkortes */
    min-width: 540px;
    max-width: 800px;
    /* Begræns højde så lange lister kan scrolles */
    max-height: 70vh;
    overflow-y: auto;
}

/* Wrap'en skal være relativ så menuen positioneres korrekt */
.dfb-andrebibler-wrap .dfb-andrebibler-trans-nav .dfb-mega-wrap {
    position: relative;
}

/* ── Søgefelt ────────────────────────────────────────────────────────── */
.dfb-andrebibler-mega-search-wrap {
    position: sticky;
    top: 0;
    background: #fff;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #e5e7eb;
    z-index: 2;
}

.dfb-andrebibler-mega-search {
    width: 100%;
    padding: 8px 12px;
    font-size: 14px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.dfb-andrebibler-mega-search:focus {
    border-color: #8b0000;
    box-shadow: 0 0 0 3px rgba(139, 0, 0, 0.1);
}

/* ── Sektioner (sproggrupper) ────────────────────────────────────────── */
/* Genbrug af eksisterende .dfb-mega-section-title - matcher 100% bog-vælger */

/* En kolonne pr. sproggruppe (læsbarhed for lange oversættelses-navne) */
.dfb-andrebibler-mega-cols {
    grid-template-columns: 1fr !important;
}

.dfb-andrebibler-mega-col {
    width: 100%;
}

.dfb-andrebibler-mega-col .dfb-mega-list {
    /* Hvis mange items: grid med 2 kolonner */
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px 12px;
}

/* Ved smal viewport: én kolonne */
@media (max-width: 720px) {
    .dfb-andrebibler-mega-col .dfb-mega-list {
        grid-template-columns: 1fr;
    }
    .dfb-andrebibler-trans-mega.dfb-mega-menu {
        min-width: auto;
        max-width: 95vw;
    }
}

/* ── Item-layout (navn + meta) ────────────────────────────────────────── */
.dfb-andrebibler-mega-item {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    text-align: left !important;
    padding: 6px 10px !important;
    line-height: 1.35 !important;
    width: 100%;
    border-radius: 4px;
}

.dfb-andrebibler-mega-name {
    font-weight: 500;
    font-size: 13px;
}

.dfb-andrebibler-mega-local {
    font-size: 11px;
    color: #9ca3af;
    font-style: italic;
}

.dfb-andrebibler-mega-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    line-height: 1;
}

.dfb-andrebibler-mega-id {
    color: #6b7280;
    background: #f3f4f6;
    padding: 1px 5px;
    border-radius: 3px;
    font-family: monospace;
    font-size: 10px;
}

/* ── Scope-badges ────────────────────────────────────────────────────── */
.dfb-andrebibler-mega-scope {
    display: inline-block;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.05em;
    padding: 2px 5px;
    border-radius: 3px;
    text-transform: uppercase;
}

.dfb-andrebibler-scope-full {
    background: #dcfce7;
    color: #166534;
}
.dfb-andrebibler-scope-nt {
    background: #fef3c7;
    color: #92400e;
}
.dfb-andrebibler-scope-ot {
    background: #dbeafe;
    color: #1e40af;
}
.dfb-andrebibler-scope-partial {
    background: #fee2e2;
    color: #991b1b;
}

/* ── Active state (samme look som bog-vælgerens) ─────────────────────── */
/* Inherits dfb-mega-active styling fra dfb-laesning.css */

/* ── Søgeresultat-highlight ─────────────────────────────────────────── */
.dfb-andrebibler-mega-item mark {
    background: #fef08a;
    color: inherit;
    padding: 0 1px;
    border-radius: 2px;
}

/* ── Intet-fundet besked ─────────────────────────────────────────────── */
.dfb-andrebibler-mega-noresults {
    padding: 1.5rem 1rem;
    text-align: center;
    color: #6b7280;
    font-style: italic;
    font-size: 14px;
}

/* ── RTL-tekst i kapitel-wrap (hebraisk, arabisk osv.) ───────────────── */
.dfb-andrebibler-wrap #dfb-kapitel-wrap[dir="rtl"] .dfb-vers-tekst {
    direction: rtl;
    text-align: right;
}