/* ==========================================================
   DRK Ortsverein Rottenburg am Neckar
   Minimaler BookStack-Theme-Override

   Das eigentliche Seitenlayout bleibt wieder beim bestehenden
   drk-page-design.css. Diese Datei fasst nur Header, Buttons,
   Formular-Fokus und dezente Navigationszustände an.
   ========================================================== */

:root {
    --drk-soft-red: #d71920;
    --drk-soft-red-dark: #b5121b;
    --drk-soft-red-muted: rgba(215, 25, 32, .10);
    --drk-soft-border: rgba(128, 128, 128, .26);
    --drk-soft-shadow: 0 8px 22px rgba(0, 0, 0, .08);
    --drk-header-bg: #171c22;
    --drk-header-bg-soft: #20262e;
    --drk-header-border: rgba(255, 255, 255, .10);
    --drk-header-text: #f5f7fa;
    --drk-header-muted: rgba(245, 247, 250, .76);
    --drk-button-gradient: linear-gradient(135deg, #e30613 0%, #c91521 56%, #a8121c 100%);
    --drk-button-gradient-hover: linear-gradient(135deg, #f01825 0%, #d71920 54%, #b5121b 100%);

    --color-primary: var(--drk-soft-red) !important;
    --color-primary-light: var(--drk-soft-red-muted) !important;
    --color-link: var(--drk-soft-red-dark) !important;
}

:root.dark-mode {
    --drk-soft-red-muted: rgba(215, 25, 32, .16);
    --drk-soft-border: rgba(255, 255, 255, .16);
    --drk-soft-shadow: 0 8px 22px rgba(0, 0, 0, .18);

    --color-primary: var(--drk-soft-red) !important;
    --color-primary-light: var(--drk-soft-red-muted) !important;
    --color-link: #ff7b83 !important;
}

html,
body {
    letter-spacing: 0 !important;
}

body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

/* Header: flach, dunkel und ohne sichtbaren Verlauf */

body > header,
body > div > header,
header#header,
header[component],
header.primary-background {
    min-height: 72px !important;
    background: var(--drk-header-bg) !important;
    color: var(--drk-header-text) !important;
    border-bottom: 1px solid var(--drk-header-border) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .22) !important;
}

body > header::before,
body > header::after,
body > div > header::before,
body > div > header::after,
header#header::before,
header#header::after,
header[component]::before,
header[component]::after,
header.primary-background::before,
header.primary-background::after {
    display: none !important;
}

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

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

header#header .logo {
    gap: 10px !important;
}

header#header .logo-image {
    width: 46px !important;
    height: 46px !important;
    max-height: 46px !important;
    object-fit: contain !important;
}

header#header .logo-text {
    font-weight: 800 !important;
}

header#header .header-links a {
    border-radius: 6px !important;
    color: var(--drk-header-muted) !important;
    font-weight: 700 !important;
}

header#header .header-links a:hover {
    background: rgba(255, 255, 255, .08) !important;
    color: #ffffff !important;
}

header#header input[type="text"]:not(.drk-mobile-search-input),
header#header 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: var(--drk-header-bg-soft) !important;
    border: 1px solid rgba(255, 255, 255, .16) !important;
    color: #ffffff !important;
    border-radius: 6px !important;
    box-shadow: none !important;
}

header#header input[type="text"]:not(.drk-mobile-search-input)::placeholder,
header#header 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, .62) !important;
}

/* Seitenleisten: schlank lassen, nur Hover dezent angleichen */

.tri-layout-left-contents,
.tri-layout-right-contents,
.tri-layout-left .card,
.tri-layout-right .card,
.tri-layout-left-contents .card,
.tri-layout-right-contents .card,
.tri-layout-left-contents .content-wrap,
.tri-layout-right-contents .content-wrap {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

.tri-layout-left-contents a,
.tri-layout-right-contents a,
.sidebar-page-list a,
.book-contents a,
.chapter-contents a {
    border-radius: 4px !important;
}

.tri-layout-left-contents a:hover,
.tri-layout-right-contents a:hover,
.sidebar-page-list a:hover,
.book-contents a:hover,
.chapter-contents a:hover,
.sidebar-page-list .selected,
.sidebar-page-list .active {
    background: var(--color-primary-light, var(--drk-soft-red-muted)) !important;
    color: var(--color-link, var(--drk-soft-red-dark)) !important;
}

.tri-layout-left-contents .entity-list-item,
.tri-layout-right-contents .entity-list-item,
.tri-layout-left-contents .item-list-row,
.tri-layout-right-contents .item-list-row {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

/* Buttons und Formulare */

.button,
button,
input[type="button"],
input[type="submit"] {
    border-radius: 6px !important;
    font-weight: 750 !important;
    box-shadow: none !important;
}

.button.primary,
button.primary,
input[type="submit"].primary,
.button.pos,
.button.svg {
    background: var(--drk-button-gradient) !important;
    border-color: var(--drk-soft-red) !important;
    color: #ffffff !important;
    box-shadow: 0 10px 20px rgba(215, 25, 32, .20) !important;
}

.button.primary:hover,
button.primary:hover,
input[type="submit"].primary:hover,
.button.pos:hover,
.button.svg:hover {
    background: var(--drk-button-gradient-hover) !important;
    border-color: var(--drk-soft-red-dark) !important;
    box-shadow: 0 12px 24px rgba(215, 25, 32, .28) !important;
}

.button.outline,
.button.secondary,
button.outline,
button.secondary {
    border-radius: 6px !important;
}

.button.outline:hover,
.button.secondary:hover,
button.outline:hover,
button.secondary:hover {
    border-color: rgba(215, 25, 32, .34) !important;
    box-shadow: 0 8px 18px rgba(0, 0, 0, .08) !important;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="url"],
select,
textarea {
    border-radius: 6px !important;
    box-shadow: none !important;
}

input:focus,
select:focus,
textarea:focus {
    border-color: rgba(215, 25, 32, .45) !important;
    box-shadow: 0 0 0 2px rgba(215, 25, 32, .12) !important;
}

/* Login nur minimal glätten */

.container.very-small .card.content-wrap {
    border-radius: 8px !important;
    box-shadow: var(--drk-soft-shadow) !important;
}

#oidc-login {
    min-height: 44px !important;
    justify-content: center !important;
}

/* Mobile */

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

    header#header .logo-image {
        width: 42px !important;
        height: 42px !important;
        max-height: 42px !important;
    }

    header#header .header-links {
        background: var(--drk-header-bg) !important;
        border: 1px solid rgba(255, 255, 255, .12) !important;
        border-radius: 8px !important;
        box-shadow: var(--drk-soft-shadow) !important;
    }

    .drk-mobile-search-bar {
        background: var(--drk-header-bg) !important;
        border-bottom: 1px solid rgba(255, 255, 255, .10) !important;
        box-shadow: 0 8px 18px rgba(0, 0, 0, .16) !important;
    }

    .drk-mobile-search-input,
    .drk-mobile-search-button,
    header#header .mobile-menu-toggle {
        border-radius: 6px !important;
    }
}