/* ==========================================================================
   chriswilde.de - Custom Styles & UI Guidelines
   ========================================================================== */

/* Layout & Sticky Header / Footer */
html, body {
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: #fcfcfc;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    background-color: #ffffff;
    border-bottom: 2px solid #333333;
}

.site-main {
    flex: 1 0 auto;
    padding-top: 1.5rem;
    padding-bottom: 2rem;
}

.site-footer {
    flex-shrink: 0;
    margin-top: auto;
    position: sticky;
    bottom: 0;
    z-index: 1020;
    background-color: #ffffff;
    border-top: 2px solid #333333;
    padding: 0.75rem 0;
}

/* --------------------------------------------------------------------------
   Admin Standardschriftart (Arial, Roboto, System-UI)
   Im Adminbereich wird die Sketchy-Schriftart gezielt mit neutraler
   Schriftart überschrieben für ermüdungsfreies Arbeiten.
   -------------------------------------------------------------------------- */
body.admin-area,
.admin-area,
.admin-area input,
.admin-area select,
.admin-area textarea,
.admin-area button,
.admin-area table,
.admin-area .card,
.admin-area .modal {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

/* --------------------------------------------------------------------------
   Sandstone Theme Nuancen für Adminbereich (nur wenn sandstone aktiv)
   -------------------------------------------------------------------------- */
body.admin-area[data-theme="sandstone"] {
    background-color: #fdfcfb;
    color: #3e3f3a;
}

body.admin-area[data-theme="sandstone"],
.admin-area[data-theme="sandstone"] {
    --bs-link-color: #325d88;
    --bs-link-color-rgb: 50, 93, 136;
    --bs-link-hover-color: #223f5d;
    --bs-link-hover-color-rgb: 34, 63, 93;
}

.admin-area[data-theme="sandstone"] a:not(.btn):not(.badge):not(.nav-link):not(.dropdown-item) {
    color: var(--bs-link-color);
}

.admin-area[data-theme="sandstone"] a:not(.btn):not(.badge):not(.nav-link):not(.dropdown-item):hover {
    color: var(--bs-link-hover-color);
}

.admin-area[data-theme="sandstone"] .navbar a.nav-link {
    color: rgba(255, 255, 255, 0.85);
}

.admin-area[data-theme="sandstone"] .navbar a.nav-link:hover,
.admin-area[data-theme="sandstone"] .navbar a.nav-link.active {
    color: #ffffff;
}

.admin-area[data-theme="sandstone"] .alert-success {
    background-color: #e9f3db !important;
    border: 1px solid #d4e8b7 !important;
    color: #3b4f1e !important;
}

.admin-area[data-theme="sandstone"] .alert-success .btn-close {
    filter: none;
}

.admin-area[data-theme="sandstone"] .btn-success {
    background-color: #5b8c36;
    border-color: #527e30;
    color: #ffffff;
}

.admin-area[data-theme="sandstone"] .btn-success:hover,
.admin-area[data-theme="sandstone"] .btn-success:focus {
    background-color: #4b742c;
    border-color: #436827;
    color: #ffffff;
}

.admin-area[data-theme="sandstone"] .badge.bg-success {
    background-color: #5b8c36 !important;
    color: #ffffff !important;
}

.admin-area[data-theme="sandstone"] .site-header {
    border-bottom: none !important;
    background-color: #325d88;
}

.admin-area[data-theme="sandstone"] .site-footer {
    border-top: 1px solid #dfd7ca !important;
    background-color: #f8f5f0 !important;
}

.admin-area[data-theme="sandstone"] .breadcrumb-container {
    background-color: #f8f5f0;
    border: 1px solid #dfd7ca;
    border-radius: 0.375rem;
    padding: 0.5rem 1rem;
}

.admin-area[data-theme="sandstone"] .card {
    border: 1px solid #dfd7ca !important;
    border-radius: 0.375rem;
}

.admin-area[data-theme="sandstone"] .card-header {
    background-color: #f8f5f0 !important;
    border-bottom: 1px solid #dfd7ca !important;
    color: #3e3f3a;
}

/* ==========================================================================
   Bootswatch United Theme - Lila/Purple Bereinigung & Lesbarkeit
   Kein Lila/Purple: Neutrales Dunkelgrau/Schwarz (#333333) für alle Dark-Elemente.
   ========================================================================== */
[data-theme="united"],
body[data-theme="united"],
.admin-area[data-theme="united"] {
    --bs-dark: #333333;
    --bs-dark-rgb: 51, 51, 51;
    --bs-purple: #333333;
    --bs-dark-text-emphasis: #212529;
    --bs-dark-bg-subtle: #e9ecef;
    --bs-dark-border-subtle: #ced4da;
    --bs-info: #17a2b8;
    --bs-info-rgb: 23, 162, 184;
}

/* Überschriften, Links und Text-Dark im United Theme: neutral dunkel, KEIN Lila */
[data-theme="united"] .text-dark,
body[data-theme="united"] .text-dark,
.admin-area[data-theme="united"] .text-dark {
    color: #333333 !important;
}

/* Dunkle Buttons im United Theme: Neutral dunkel mit weißer Schrift */
[data-theme="united"] .btn-dark,
body[data-theme="united"] .btn-dark,
.admin-area[data-theme="united"] .btn-dark {
    --bs-btn-bg: #333333;
    --bs-btn-border-color: #333333;
    --bs-btn-hover-bg: #222222;
    --bs-btn-hover-border-color: #222222;
    --bs-btn-active-bg: #1a1a1a;
    --bs-btn-active-border-color: #1a1a1a;
    --bs-btn-color: #ffffff;
    background-color: #333333 !important;
    border-color: #333333 !important;
    color: #ffffff !important;
}

[data-theme="united"] .btn-outline-dark,
body[data-theme="united"] .btn-outline-dark,
.admin-area[data-theme="united"] .btn-outline-dark {
    --bs-btn-color: #333333;
    --bs-btn-border-color: #333333;
    --bs-btn-hover-bg: #333333;
    --bs-btn-hover-border-color: #333333;
    --bs-btn-hover-color: #ffffff;
    --bs-btn-active-bg: #222222;
    --bs-btn-active-border-color: #222222;
    --bs-btn-active-color: #ffffff;
    color: #333333 !important;
    border-color: #333333 !important;
}

[data-theme="united"] .btn-outline-dark:hover,
[data-theme="united"] .btn-outline-dark:focus,
[data-theme="united"] .btn-outline-dark:active,
body[data-theme="united"] .btn-outline-dark:hover,
.admin-area[data-theme="united"] .btn-outline-dark:hover {
    background-color: #333333 !important;
    border-color: #333333 !important;
    color: #ffffff !important;
}

[data-theme="united"] .bg-dark,
body[data-theme="united"] .bg-dark,
.admin-area[data-theme="united"] .bg-dark {
    background-color: #333333 !important;
    color: #ffffff !important;
}

[data-theme="united"] .table-dark,
body[data-theme="united"] .table-dark,
.admin-area[data-theme="united"] .table-dark {
    --bs-table-bg: #333333;
    --bs-table-border-color: #444444;
    --bs-table-color: #ffffff;
}

/* ==========================================================================
   Globale Kontrast-Sicherheit für Buttons & Badges (Alle Themes)
   Keine dunkle Schrift auf dunklem Grund, keine Linkfarben auf Buttons/Badges.
   ========================================================================== */
a.btn,
.btn {
    text-decoration: none;
}

/* Dunkle Buttons: Zwingend weiße Schrift, auch wenn es sich um <a>-Tags handelt */
a.btn-dark, .btn-dark,
a.btn-primary, .btn-primary,
a.btn-success, .btn-success,
a.btn-danger, .btn-danger,
a.btn-secondary, .btn-secondary,
a.btn-info, .btn-info {
    color: #ffffff !important;
}

a.btn-dark:hover, .btn-dark:hover,
a.btn-primary:hover, .btn-primary:hover,
a.btn-success:hover, .btn-success:hover,
a.btn-danger:hover, .btn-danger:hover,
a.btn-secondary:hover, .btn-secondary:hover,
a.btn-info:hover, .btn-info:hover {
    color: #ffffff !important;
}

/* Dunkle Badges: Immer weiße, kontraststarke Schrift */
.badge.bg-dark, a.badge.bg-dark,
.badge.bg-primary, a.badge.bg-primary,
.badge.bg-success, a.badge.bg-success,
.badge.bg-danger, a.badge.bg-danger,
.badge.bg-secondary, a.badge.bg-secondary {
    color: #ffffff !important;
}

/* Helle und dezente Badges (subtle/light): Immer klares, lesbares Dunkelgrau */
.badge.bg-light, a.badge.bg-light,
.badge.bg-light-subtle, a.badge.bg-light-subtle,
.badge.bg-secondary-subtle, a.badge.bg-secondary-subtle,
.badge.bg-success-subtle, a.badge.bg-success-subtle,
.badge.bg-info-subtle, a.badge.bg-info-subtle,
.badge.bg-warning-subtle, a.badge.bg-warning-subtle,
.badge.bg-danger-subtle, a.badge.bg-danger-subtle {
    color: #212529 !important;
}

/* --------------------------------------------------------------------------
   Überschriften-Regeln
   Keine langen Überschriften, keine Icons in Überschriften
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6,
.card-header, .widget-title {
    font-weight: 700;
}

/* Verhindert Icons in Überschriften explizit per CSS */
h1 i, h2 i, h3 i, h4 i, h5 i, h6 i {
    display: none !important;
}

/* --------------------------------------------------------------------------
   Buttons im Adminbereich (Icon-Buttons bevorzugt)
   -------------------------------------------------------------------------- */
.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    line-height: 1;
}

.btn-icon.btn-sm {
    width: 1.85rem;
    height: 1.85rem;
    font-size: 0.875rem;
}

.btn-icon.btn-lg {
    width: 2.75rem;
    height: 2.75rem;
    font-size: 1.25rem;
}

/* --------------------------------------------------------------------------
   Avatar & Profilanzeige in der Navbar
   -------------------------------------------------------------------------- */
.user-avatar-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: #333333;
    color: #ffffff;
    font-weight: 700;
    font-size: 0.85rem;
    border: 2px solid #555555;
    text-transform: uppercase;
}

.user-level-badge {
    font-size: 0.65rem;
    letter-spacing: 0.5px;
    padding: 0.2rem 0.45rem;
    text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Woltlab / WordPress dynamische Sidebar Widgets (1/3 Spalte)
   -------------------------------------------------------------------------- */
.sidebar-widget {
    margin-bottom: 1.5rem;
}

.sidebar-widget .card-header {
    background-color: #f7f7f7;
    border-bottom: 2px solid #333333;
}

.widget-author-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background-color: #212529;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    font-weight: bold;
    border: 3px solid #333333;
    margin: 0 auto 0.75rem;
}

.category-badge-count {
    font-size: 0.8rem;
    padding: 0.25rem 0.5rem;
}

.archive-tree-item {
    padding: 0.35rem 0;
    border-bottom: 1px dashed #dddddd;
}

.archive-tree-item:last-child {
    border-bottom: none;
}

/* --------------------------------------------------------------------------
   Blog Cards & Image Carousel
   -------------------------------------------------------------------------- */
.blog-card {
    transition: transform 0.15s ease-in-out;
}

.blog-card:hover {
    transform: translateY(-2px);
}

.blog-thumb-img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    border-bottom: 2px solid #333333;
}

.blog-detail-hero-img {
    width: 100%;
    max-height: 420px;
    object-fit: cover;
    border: 2px solid #333333;
    border-radius: 8px;
    margin-bottom: 1.25rem;
}

.blog-gallery-thumb {
    width: 100%;
    height: 100px;
    object-fit: cover;
    border: 2px solid #333333;
    border-radius: 6px;
    cursor: pointer;
    transition: opacity 0.2s;
}

.blog-gallery-thumb:hover {
    opacity: 0.85;
}

/* --------------------------------------------------------------------------
   Breadcrumbs
   -------------------------------------------------------------------------- */
.breadcrumb-container {
    background-color: transparent;
    padding: 0.5rem 0;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.breadcrumb-item + .breadcrumb-item::before {
    content: "»";
    font-weight: bold;
}

/* --------------------------------------------------------------------------
   Passwort-Sichtbarkeit (Blur / Unblur)
   -------------------------------------------------------------------------- */
.mail-password-hidden {
    filter: blur(0.35rem);
    user-select: none;
    transition: filter 0.15s ease-in-out;
}

.mail-password-visible {
    filter: none;
    user-select: text;
}

/* --------------------------------------------------------------------------
   Tabellen-Paginierung
   -------------------------------------------------------------------------- */
.pagination {
    margin-bottom: 0;
    flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   Quellcode-Darstellung & Syntax Highlighting (Prism.js / TinyMCE)
   -------------------------------------------------------------------------- */
.code-block-container {
    border: 1px solid #333333;
    border-radius: 6px;
    overflow: hidden;
    margin: 1.25rem 0;
}

.code-block-header {
    background-color: #222222 !important;
    border-bottom: 1px solid #444444;
    user-select: none;
}

.code-block-container pre[class*="language-"] {
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    max-height: 560px;
    overflow: auto;
}

pre[class*="language-"] {
    border-radius: 6px;
    margin: 1.25rem 0;
    max-height: 560px;
    overflow: auto;
    font-size: 0.9rem;
    line-height: 1.45;
}

code[class*="language-"],
pre[class*="language-"] {
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* --------------------------------------------------------------------------
   Suchbegriff-Hervorhebung (Search Term Highlighting)
   -------------------------------------------------------------------------- */
mark.search-highlight,
.search-highlight {
    background-color: #ffe082 !important;
    color: #212529 !important;
    padding: 0.12rem 0.35rem !important;
    border-radius: 4px !important;
    font-weight: 600 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
    display: inline;
    line-height: inherit;
}