/* ==========================================================
   DRK Rottenburg Wiki
   drk-header.css
   Globaler Header + Mobile-Suche + Mobile-Menü als Dropdown-Panel
   Datei: /var/www/bookstack/public/custom/drk-header.css
   ========================================================== */


/* ==========================================================
   1. Haupt-Header
   ========================================================== */

body > header,
body > div > header,
header[component],
header.primary-background {
    position: relative !important;
    z-index: 5000 !important;
    min-height: 64px !important;
    overflow: visible !important;

    background: linear-gradient(135deg, #b00020 0%, #cf0026 58%, #7d0018 100%) !important;
    color: #ffffff !important;

    box-shadow: 0 10px 26px rgba(0,0,0,0.22) !important;
    border-bottom: 1px solid rgba(255,255,255,0.14) !important;
}


/* ==========================================================
   2. Header-Dekoformen
   ========================================================== */

body > header::before,
body > div > header::before,
header[component]::before,
header.primary-background::before {
    content: "";
    position: absolute !important;

    top: -38px !important;
    right: 7% !important;

    width: 110px !important;
    height: 110px !important;

    border-radius: 50% !important;
    background: rgba(255,255,255,0.10) !important;

    pointer-events: none !important;
    z-index: 0 !important;
}

body > header::after,
body > div > header::after,
header[component]::after,
header.primary-background::after {
    content: "";
    position: absolute !important;

    left: 18% !important;
    bottom: 6px !important;

    width: 170px !important;
    height: 42px !important;

    border-radius: 70px !important;
    background: rgba(255,255,255,0.08) !important;
    transform: rotate(-7deg) !important;

    pointer-events: none !important;
    z-index: 0 !important;
}


/* Direkte Header-Inhalte über die Deko legen */
body > header > *,
body > div > header > *,
header[component] > *,
header.primary-background > * {
    position: relative !important;
    z-index: 2 !important;
}


/* ==========================================================
   3. Header-Links, Logo, Titel
   ========================================================== */

body > header a,
body > div > header a,
header[component] a,
header.primary-background a {
    color: #ffffff !important;
    text-decoration: none !important;
}

body > header a:hover,
body > div > header a:hover,
header[component] a:hover,
header.primary-background a:hover {
    color: #ffffff !important;
    text-decoration: none !important;
}

body > header .logo,
body > div > header .logo,
header[component] .logo,
header.primary-background .logo,
body > header .header-title,
body > div > header .header-title,
header[component] .header-title,
header.primary-background .header-title {
    color: #ffffff !important;
    font-weight: 700 !important;
}


/* ==========================================================
   4. Desktop-Suchfeld im Header
   Eigene mobile Suchleiste nicht mit treffen
   ========================================================== */

body > header input[type="text"]:not(.drk-mobile-search-input),
body > header input[type="search"]:not(.drk-mobile-search-input),
body > div > header input[type="text"]:not(.drk-mobile-search-input),
body > div > header input[type="search"]:not(.drk-mobile-search-input),
header[component] input[type="text"]:not(.drk-mobile-search-input),
header[component] input[type="search"]:not(.drk-mobile-search-input),
header.primary-background input[type="text"]:not(.drk-mobile-search-input),
header.primary-background input[type="search"]:not(.drk-mobile-search-input) {
    background: rgba(110,0,18,0.38) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255,255,255,0.22) !important;
    border-radius: 999px !important;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.18) !important;
}

body > header input[type="text"]:not(.drk-mobile-search-input)::placeholder,
body > header input[type="search"]:not(.drk-mobile-search-input)::placeholder,
body > div > header input[type="text"]:not(.drk-mobile-search-input)::placeholder,
body > div > header input[type="search"]:not(.drk-mobile-search-input)::placeholder,
header[component] input[type="text"]:not(.drk-mobile-search-input)::placeholder,
header[component] input[type="search"]:not(.drk-mobile-search-input)::placeholder,
header.primary-background input[type="text"]:not(.drk-mobile-search-input)::placeholder,
header.primary-background input[type="search"]:not(.drk-mobile-search-input)::placeholder {
    color: rgba(255,255,255,0.72) !important;
}

body > header input[type="text"]:not(.drk-mobile-search-input):focus,
body > header input[type="search"]:not(.drk-mobile-search-input):focus,
body > div > header input[type="text"]:not(.drk-mobile-search-input):focus,
body > div > header input[type="search"]:not(.drk-mobile-search-input):focus,
header[component] input[type="text"]:not(.drk-mobile-search-input):focus,
header[component] input[type="search"]:not(.drk-mobile-search-input):focus,
header.primary-background input[type="text"]:not(.drk-mobile-search-input):focus,
header.primary-background input[type="search"]:not(.drk-mobile-search-input):focus {
    background: rgba(255,255,255,0.16) !important;
    border-color: rgba(255,255,255,0.46) !important;
    outline: none !important;
}


/* ==========================================================
   5. Header-Icons
   ========================================================== */

body > header svg,
body > div > header svg,
header[component] svg,
header.primary-background svg {
    color: rgba(255,255,255,0.92) !important;
    fill: currentColor !important;
}


/* ==========================================================
   6. Desktop-Profil-Dropdown
   Nur Desktop, damit das mobile 3-Punkte-Menü nicht kaputtgeht
   ========================================================== */

@media screen and (min-width: 901px) {
    header .dropdown-menu {
        position: absolute !important;
        z-index: 99999 !important;
        overflow: hidden !important;

        background: var(--color-page, #ffffff) !important;
        color: var(--color-text-base, #222222) !important;

        border: 1px solid rgba(128,128,128,0.25) !important;
        border-radius: 10px !important;
        box-shadow: 0 14px 32px rgba(0,0,0,0.28) !important;

        text-align: left !important;
    }

    header .dropdown-menu a {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;

        padding: 10px 14px !important;

        background: transparent !important;
        color: var(--color-text-base, #222222) !important;

        font-weight: 500 !important;
        text-decoration: none !important;
        white-space: nowrap !important;
        text-align: left !important;
    }

    header .dropdown-menu a:hover {
        background: rgba(176,0,32,0.10) !important;
        color: var(--color-text-base, #222222) !important;
    }

    header .dropdown-menu svg {
        color: currentColor !important;
        fill: currentColor !important;
    }

    html.dark-mode header .dropdown-menu,
    body.dark-mode header .dropdown-menu {
        background: #222222 !important;
        color: #eeeeee !important;
        border-color: rgba(255,255,255,0.16) !important;
    }

    html.dark-mode header .dropdown-menu a,
    body.dark-mode header .dropdown-menu a {
        color: #eeeeee !important;
    }

    html.dark-mode header .dropdown-menu a:hover,
    body.dark-mode header .dropdown-menu a:hover {
        background: rgba(255,255,255,0.10) !important;
        color: #ffffff !important;
    }
}


/* ==========================================================
   7. Mobile Header-Grundlayout
   ========================================================== */

@media screen and (max-width: 900px) {
    body > header,
    body > div > header,
    header[component],
    header.primary-background {
        min-height: 68px !important;
        overflow: visible !important;
    }

    body > header::before,
    body > div > header::before,
    header[component]::before,
    header.primary-background::before {
        width: 92px !important;
        height: 92px !important;
        top: -28px !important;
        right: 16px !important;
    }

    body > header::after,
    body > div > header::after,
    header[component]::after,
    header.primary-background::after {
        width: 120px !important;
        height: 38px !important;
        left: 15% !important;
        bottom: 7px !important;
    }

    body > header .logo,
    body > div > header .logo,
    header[component] .logo,
    header.primary-background .logo {
        max-width: calc(100vw - 105px) !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
}


/* ==========================================================
   8. Mobile Suchleiste
   Wird per /custom/drk-mobile-search.js unter dem Header eingefügt
   ========================================================== */

.drk-mobile-search-bar {
    display: none;
}

@media screen and (max-width: 900px) {
    .drk-mobile-search-bar {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;

        padding: 9px 10px 11px 10px !important;

        background: linear-gradient(135deg, #b00020 0%, #cf0026 58%, #7d0018 100%) !important;
        border-bottom: 1px solid rgba(255,255,255,0.14) !important;
        box-shadow: 0 8px 20px rgba(0,0,0,0.18) !important;

        position: relative !important;
        z-index: 900 !important;
    }

    .drk-mobile-search-form {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;

        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    .drk-mobile-search-input {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        width: auto !important;
        height: 38px !important;

        box-sizing: border-box !important;
        padding: 0 13px !important;

        border-radius: 999px !important;
        border: 1px solid rgba(255,255,255,0.32) !important;

        background: rgba(110,0,18,0.42) !important;
        color: #ffffff !important;

        font-size: 0.95rem !important;
        line-height: 38px !important;
        outline: none !important;
        box-shadow: none !important;
    }

    .drk-mobile-search-input::placeholder {
        color: rgba(255,255,255,0.72) !important;
    }

    .drk-mobile-search-input:focus {
        background: rgba(255,255,255,0.16) !important;
        border-color: rgba(255,255,255,0.52) !important;
    }

    .drk-mobile-search-button {
        flex: 0 0 42px !important;

        width: 42px !important;
        min-width: 42px !important;
        height: 38px !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        padding: 0 !important;

        border-radius: 999px !important;
        border: 1px solid rgba(255,255,255,0.32) !important;

        background: rgba(255,255,255,0.14) !important;
        color: #ffffff !important;

        font-size: 1rem !important;
        line-height: 1 !important;

        cursor: pointer !important;
        box-shadow: none !important;
    }

    .drk-mobile-search-button:hover {
        background: rgba(255,255,255,0.22) !important;
    }
}

@media screen and (max-width: 430px) {
    .drk-mobile-search-bar {
        padding: 8px 8px 10px 8px !important;
    }

    .drk-mobile-search-form {
        gap: 6px !important;
    }

    .drk-mobile-search-input {
        height: 36px !important;
        font-size: 0.88rem !important;
        padding: 0 11px !important;
    }

    .drk-mobile-search-button {
        flex-basis: 38px !important;
        width: 38px !important;
        min-width: 38px !important;
        height: 36px !important;
    }
}


/* ==========================================================
   9. Mobile 3-Punkte-Menü
   Ziel:
   - nichts wird abgeschnitten
   - beide BookStack-Menüs sehen gleich aus
   - kein harter Clip am Header
   ========================================================== */

@media screen and (max-width: 900px) {

    /* Header und direkte Wrapper dürfen das Menü nicht abschneiden */
    html,
    body,
    body > header,
    body > div > header,
    header,
    header.primary-background,
    header[component],
    header > div,
    header .header,
    header .header-container,
    header .header-content,
    header .header-links,
    header .header-menu,
    header .dropdown-container,
    header [component="dropdown"] {
        overflow: visible !important;
    }

    body > header,
    body > div > header,
    header,
    header.primary-background,
    header[component] {
        position: relative !important;
        z-index: 99990 !important;
    }

    /* Deko nie über Menüs */
    body > header::before,
    body > header::after,
    body > div > header::before,
    body > div > header::after,
    header.primary-background::before,
    header.primary-background::after,
    header[component]::before,
    header[component]::after {
        z-index: 0 !important;
        pointer-events: none !important;
    }

    /* 3-Punkte-Button */
    header button[aria-label*="menu" i],
    header button[aria-label*="menü" i],
    header button[aria-label*="navigation" i],
    header .mobile-menu-toggle {
        position: relative !important;
        z-index: 1000000 !important;

        overflow: visible !important;

        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        padding: 0 !important;

        border-radius: 10px !important;
        border: 1px solid rgba(255,255,255,0.55) !important;
        background: rgba(120,0,22,0.24) !important;
        color: #ffffff !important;

        box-shadow: none !important;
    }

    header button[aria-label*="menu" i] svg,
    header button[aria-label*="menü" i] svg,
    header button[aria-label*="navigation" i] svg,
    header .mobile-menu-toggle svg {
        width: 24px !important;
        height: 24px !important;

        color: #ffffff !important;
        fill: currentColor !important;
    }

    /*
       Mobile Menüs als sichtbares Dropdown-Panel.
       Wichtig: Nur echte Dropdowns/Rollenmenüs anfassen.
       Keine pauschalen Regeln für .popup oder .menu.
    */
    header .dropdown-menu,
    header [role="menu"] {
        position: fixed !important;

        top: 86px !important;
        left: 12px !important;
        right: 12px !important;

        width: auto !important;
        min-width: 0 !important;
        max-width: calc(100vw - 24px) !important;

        max-height: calc(100vh - 110px) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;

        z-index: 999999 !important;

        padding: 8px !important;

        border-radius: 16px !important;
        border: 1px solid rgba(255,255,255,0.16) !important;

        background: #222222 !important;
        color: #eeeeee !important;

        box-shadow: 0 22px 52px rgba(0,0,0,0.55) !important;

        text-align: left !important;
    }

    /* Einheitliche Menüeinträge */
    header .dropdown-menu a,
    header [role="menu"] a,
    header .dropdown-menu button,
    header [role="menu"] button {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;

        width: 100% !important;
        min-height: 42px !important;
        box-sizing: border-box !important;

        padding: 10px 12px !important;

        border: 0 !important;
        border-radius: 10px !important;

        background: transparent !important;
        color: #eeeeee !important;

        font-size: 0.95rem !important;
        font-weight: 500 !important;
        line-height: 1.25 !important;

        text-align: left !important;
        text-decoration: none !important;
        white-space: nowrap !important;

        box-shadow: none !important;
    }

    header .dropdown-menu a:hover,
    header [role="menu"] a:hover,
    header .dropdown-menu button:hover,
    header [role="menu"] button:hover {
        background: rgba(255,255,255,0.10) !important;
        color: #ffffff !important;
        text-decoration: none !important;
    }

    /* Icons in Menüs */
    header .dropdown-menu svg,
    header [role="menu"] svg {
        width: 17px !important;
        height: 17px !important;
        min-width: 17px !important;

        color: currentColor !important;
        fill: currentColor !important;

        opacity: 0.92 !important;
    }

    /* Trennlinien */
    header .dropdown-menu hr,
    header [role="menu"] hr {
        border: 0 !important;
        border-top: 1px solid rgba(255,255,255,0.14) !important;
        margin: 7px 4px !important;
    }

    /*
       Falls BookStack zwei Menüs gleichzeitig rendert:
       beide behalten denselben Stil und werden untereinander geschoben.
    */
    header .dropdown-menu + .dropdown-menu,
    header [role="menu"] + [role="menu"],
    header .dropdown-menu ~ .dropdown-menu,
    header [role="menu"] ~ [role="menu"] {
        top: auto !important;
        left: 12px !important;
        right: 12px !important;
        margin-top: 8px !important;
    }

    /*
       Profilmenü, wenn es separat geöffnet wird:
       etwas tiefer, damit es nicht auf dem Hauptmenü liegt.
       Browser ohne :has ignorieren diese Regel.
    */
    header .dropdown-menu:has(a[href*="profile"]),
    header .dropdown-menu:has(a[href*="account"]),
    header [role="menu"]:has(a[href*="profile"]),
    header [role="menu"]:has(a[href*="account"]) {
        top: 300px !important;
    }
}




/* ==========================================================
   DRK Header Fix v8
   Mobile: nur Profil-/Admin-Dropdown anzeigen
   Hauptmenü mit Search / Shelves / Books / Settings ausblenden
   ========================================================== */

@media screen and (max-width: 900px) {

    /* Das BookStack-Mobile-Hauptmenü ausblenden */
    header .dropdown-menu:has(a[href*="/search"]),
    header .dropdown-menu:has(a[href*="/shelves"]),
    header .dropdown-menu:has(a[href*="/books"]),
    header [role="menu"]:has(a[href*="/search"]),
    header [role="menu"]:has(a[href*="/shelves"]),
    header [role="menu"]:has(a[href*="/books"]) {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    /* Profil-/Admin-Menü als einziges sichtbares Mobile-Dropdown */
    header .dropdown-menu:has(a[href*="profile"]),
    header .dropdown-menu:has(a[href*="account"]),
    header .dropdown-menu:has(a[href*="logout"]),
    header [role="menu"]:has(a[href*="profile"]),
    header [role="menu"]:has(a[href*="account"]),
    header [role="menu"]:has(a[href*="logout"]) {
        display: block !important;
        visibility: visible !important;
        pointer-events: auto !important;

        position: fixed !important;

        top: 86px !important;
        left: 12px !important;
        right: 12px !important;

        width: auto !important;
        min-width: 0 !important;
        max-width: calc(100vw - 24px) !important;

        max-height: calc(100vh - 110px) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;

        z-index: 999999 !important;

        padding: 8px !important;

        border-radius: 16px !important;
        border: 1px solid rgba(255,255,255,0.16) !important;

        background: #222222 !important;
        color: #eeeeee !important;

        box-shadow: 0 22px 52px rgba(0,0,0,0.55) !important;

        text-align: left !important;
    }

    /* Einträge im Profilmenü */
    header .dropdown-menu:has(a[href*="profile"]) a,
    header .dropdown-menu:has(a[href*="account"]) a,
    header .dropdown-menu:has(a[href*="logout"]) a,
    header [role="menu"]:has(a[href*="profile"]) a,
    header [role="menu"]:has(a[href*="account"]) a,
    header [role="menu"]:has(a[href*="logout"]) a {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;

        width: 100% !important;
        min-height: 42px !important;
        box-sizing: border-box !important;

        padding: 10px 12px !important;

        border: 0 !important;
        border-radius: 10px !important;

        background: transparent !important;
        color: #eeeeee !important;

        font-size: 0.95rem !important;
        font-weight: 500 !important;
        line-height: 1.25 !important;

        text-align: left !important;
        text-decoration: none !important;
        white-space: nowrap !important;

        box-shadow: none !important;
    }

    header .dropdown-menu:has(a[href*="profile"]) a:hover,
    header .dropdown-menu:has(a[href*="account"]) a:hover,
    header .dropdown-menu:has(a[href*="logout"]) a:hover,
    header [role="menu"]:has(a[href*="profile"]) a:hover,
    header [role="menu"]:has(a[href*="account"]) a:hover,
    header [role="menu"]:has(a[href*="logout"]) a:hover {
        background: rgba(255,255,255,0.10) !important;
        color: #ffffff !important;
        text-decoration: none !important;
    }

    /* Icons im Profilmenü */
    header .dropdown-menu:has(a[href*="profile"]) svg,
    header .dropdown-menu:has(a[href*="account"]) svg,
    header .dropdown-menu:has(a[href*="logout"]) svg,
    header [role="menu"]:has(a[href*="profile"]) svg,
    header [role="menu"]:has(a[href*="account"]) svg,
    header [role="menu"]:has(a[href*="logout"]) svg {
        width: 17px !important;
        height: 17px !important;
        min-width: 17px !important;

        color: currentColor !important;
        fill: currentColor !important;

        opacity: 0.92 !important;
    }
}



/* ==========================================================
   DRK Header Fix v9
   Mobile: alten Admin-/Account-Trigger komplett ausblenden
   Nur 3-Punkte-Button + dunkles Dropdown behalten
   ========================================================== */

@media screen and (max-width: 900px) {

    /* Alten User-/Account-Trigger im Header ausblenden */
    header .header-links .user-avatar,
    header .header-links .avatar,
    header .header-links .header-user,
    header .header-links .user-menu,
    header .header-links .user-menu-trigger,
    header .header-links .user-name,
    header .header-links .text-button,
    header .header-links a[href*="/user/"],
    header .header-links a[href*="/settings/users"],
    header .header-links a[href*="/account"],
    header .header-links [data-dropdown][aria-expanded],
    header .header-links .dropdown-container:not(:has(button[aria-label*="menu" i])) {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    /* Falls BookStack den User-Button nicht in .header-links rendert */
    header .header-actions .user-avatar,
    header .header-actions .avatar,
    header .header-actions .header-user,
    header .header-actions .user-menu,
    header .header-actions .user-menu-trigger,
    header .header-actions .user-name,
    header .header-actions a[href*="/user/"],
    header .header-actions a[href*="/account"] {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    /* Kleine übrig bleibende Avatar-/Admin-Chips sicher entfernen */
    header .avatar:not(.entity-list-item-icon):not(.icon),
    header .user-avatar,
    header .header-user,
    header .user-menu-trigger {
        max-width: 0 !important;
        max-height: 0 !important;
        overflow: hidden !important;
    }

    /* Das Profil-Dropdown sauber über allem halten */
    header .dropdown-menu:has(a[href*="profile"]),
    header .dropdown-menu:has(a[href*="account"]),
    header .dropdown-menu:has(a[href*="logout"]),
    header [role="menu"]:has(a[href*="profile"]),
    header [role="menu"]:has(a[href*="account"]),
    header [role="menu"]:has(a[href*="logout"]) {
        position: fixed !important;
        top: 84px !important;
        left: 12px !important;
        right: 12px !important;
        width: auto !important;
        max-width: calc(100vw - 24px) !important;
        z-index: 999999 !important;
    }
}