html {
    height: 100% !important;
}

body {
    font-family: 'Inter', sans-serif !important;
    background-color: var(--bs-body-bg)!important;
    background-image: var(--body-bg-image)!important;
    display: flex!important;
    flex-direction: column!important;
    min-height: 100vh!important;
    overflow-y: hidden !important;
}

main {
    height: auto !important;
}

#app-container {
    flex: 1!important;
    overflow-y: auto!important;
}

/* --- Light & Dark Mode Theming with Bootstrap Variables --- */
:root {
    --bs-primary: #16a3a3!important;
    --bs-primary-rgb: #16A3A3!important;
    --bs-link-color-rgb: #16A3A3!important;
    --bs-link-hover-color-rgb: #0F7676!important;
}

[data-bs-theme="light"] {
    --bs-body-bg: #F3F4F6!important;
    --bs-body-color: #111827!important;
    --header-bg: #FFFFFF!important;
    --header-color: #111827!important;
    --footer-bg: #FFFFFF!important;
    --footer-color: #6B7280!important;
    --bs-secondary-bg: #FFFFFF!important;
    --bs-tertiary-bg: #F9FAFB!important;
    --bs-tertiary-color: #6B7280!important;
    --bs-border-color: #E5E7EB!important;
    --body-bg-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%239C92AC' fill-opacity='0.05'%3E%3Cpath d='M0 38.59l2.83-2.83 1.41 1.41L1.41 40H0v-1.41zM0 1.4l2.83 2.83 1.41-1.41L1.41 0H0v1.41zM38.59 40l-2.83-2.83 1.41-1.41L40 38.59V40h-1.41zM40 1.41l-2.83 2.83-1.41-1.41L38.59 0H40v1.41z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")!important;
    --logo-url: url("../images/logoLightMode.svg")!important;
    --input-enabled: #FFFFFF!important;
    --input-disabled: #F3F4F6!important;
    --link-color: var(--bs-link-hover-color-rgb);
    --link-color-hover: var(--bs-link-color-rgb);
}

[data-bs-theme="dark"] {
    --bs-body-bg: #111827!important;
    --bs-body-color: #F9FAFB!important;
    --header-bg: #1f2937!important;
    --header-color: #F9FAFB!important;
    --footer-bg: #1f2937!important;
    --footer-color: #9CA3AF!important;
    --bs-secondary-bg: #1F2937!important;
    --bs-tertiary-bg: #374151!important;
    --bs-tertiary-color: #9CA3AF!important;
    --bs-border-color: #4B5563!important;
    --body-bg-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%239C92AC' fill-opacity='0.07'%3E%3Cpath d='M0 38.59l2.83-2.83 1.41 1.41L1.41 40H0v-1.41zM0 1.4l2.83 2.83 1.41-1.41L1.41 0H0v1.41zM38.59 40l-2.83-2.83 1.41-1.41L40 38.59V40h-1.41zM40 1.41l-2.83 2.83-1.41-1.41L38.59 0H40v1.41z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")!important;
    --logo-url: url("../images/logoDarkMode.svg")!important;
    --input-enabled: #111827!important;
    --input-disabled: #1F2937!important;
    --link-color: var(--bs-link-color-rgb);
    --link-color-hover: var(--bs-link-hover-color-rgb);
}

/* Custom Component Styles */
.header {
    background-color: var(--header-bg)!important;
    color: var(--header-color)!important;
}
.header .text-body-color, .header .bi{
    color: var(--header-color) !important;
}

.card {
    background-color: var(--bs-secondary-bg)!important;
    border-color: transparent!important;
    border-radius: 1rem!important;
}

.nav-tabs .nav-link {
    border-color: transparent!important;
    border-bottom: 2px solid transparent!important;
}
.nav-tabs .nav-link.active {
    color: var(--bs-primary)!important;
    border-bottom-color: var(--bs-primary)!important;
    background-color: transparent!important;
}
.nav-tabs .nav-link:not(.active) {
    color: var(--bs-tertiary-color)!important;
}
.nav-tabs .nav-link:hover {
    border-bottom-color: var(--bs-border-color)!important;
}
.btn-primary {
    /* Die nächsten beiden Zeilen setzen die neue Standardfarbe */
    --bs-btn-bg: #0d6efd !important;
    --bs-btn-border-color: #0d6efd !important;

    /* Diese Hover-Farben waren bereits korrekt */
    --bs-btn-hover-bg: #108a8a !important;
    --bs-btn-hover-border-color: #108a8a !important;

    /* Wir passen die "Aktiv"-Farbe an die Hover-Farbe an */
    --bs-btn-active-bg: #108a8a !important;
    --bs-btn-active-border-color: #108a8a !important;

    /* Und aktualisieren den Schatten-Fokus auf die neue Standardfarbe */
    --bs-btn-focus-shadow-rgb: 13, 110, 253 !important;

    border-radius: 0.75rem !important;
    padding: 0.5rem 1rem !important;
}

.bg-primary{
    background-color: #16a3a3 !important;
}

/* Event Card Styling */
.event-card-container { text-decoration: none!important; color: inherit!important; }
.event-card {
    position: relative!important;
    overflow: hidden!important;
    color: white!important;
    min-height: 200px!important;
    transition: transform 0.3s ease, box-shadow 0.3s ease!important;
    border: none!important;
}
.event-card-container:hover .event-card {
    transform: translateY(-5px)!important;
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15) !important;
}
.event-card .card-img { width: 100%!important; height: 100%!important; object-fit: cover!important; position: absolute!important; }
.card-img-overlay {
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 60%, rgba(0,0,0,0) 100%)!important;
    display: flex!important; flex-direction: column!important; justify-content: flex-end!important;
}

.upload-drop-zone {
    border: 2px dashed var(--bs-border-color)!important;
    border-radius: 0.75rem!important;
    cursor: pointer!important;
    transition: background-color 0.2s ease!important;
}
.upload-drop-zone:hover {
    background-color: var(--bs-tertiary-bg)!important;
}

.logo-preview, .cover-preview, .item-image-preview {
    object-fit: contain!important;
    background-color: var(--bs-tertiary-bg)!important;
}
.logo-preview { width: 150px!important; height: 150px!important; }
.cover-preview { width: 100%!important; height: 150px!important; }
.item-image-preview { width: 100px!important; height: 100px!important; }
.upload-preview-icon {
    width: 40px!important;
    height: 40px!important;
    object-fit: cover!important;
}

.site-footer {
    background-color: var(--footer-bg)!important;
    color: var(--footer-color)!important;
}
.site-footer a {
    color: var(--footer-color)!important;
}


.fade-in { animation: fadeIn 0.5s ease-in-out!important; }
@keyframes fadeIn { from { opacity: 0!important; transform: translateY(10px)!important; } to { opacity: 1!important; transform: translateY(0)!important; } }

@keyframes ring-bell {
    0% { transform: rotate(0); }
    10% { transform: rotate(14deg); }
    20% { transform: rotate(-8deg); }
    30% { transform: rotate(14deg); }
    40% { transform: rotate(-4deg); }
    50% { transform: rotate(10deg); }
    60% { transform: rotate(0); }
    100% { transform: rotate(0); }
}

/* KORRIGIERTE ANIMATIONSREGELN */
#notification-bell .bi-bell {
    display: inline-block; /* Stellt sicher, dass Transformationen zuverlässig angewendet werden */
    transform-origin: top center;
}

#notification-bell:hover .bi-bell {
    animation: ring-bell 0.8s ease-in-out;
}

@media print {
    body * {
        visibility: hidden!important;
    }
    #print-area, #print-area * {
        visibility: visible!important;
    }
    #print-area {
        position: absolute!important;
        left: 0!important;
        top: 0!important;
        width: 100%!important;
    }
    .card {
        box-shadow: none !important;
        border: 1px solid #dee2e6 !important;
    }
    .btn {
        display: none!important;
    }
}

.no-arrow.dropdown-toggle::after {
    display: none !important;
}

.themed-logo {
    background-image: var(--logo-url)!important;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
    text-indent: -9999px; /* Verbirgt den Text, falls vorhanden */
    width: 125px; /* Breite hinzugefügt */
    height: 75px;  /* Höhe hinzugefügt */
}

.container-centered {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.form-title {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

.form-control {
    background-color: var(--input-enabled)!important;
}

.form-control:disabled {
    background-color: var(--input-disabled)!important;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid,
input.invalid,
textarea.invalid,
select.invalid,
.form-control.invalid {
    border-color: #dc3545 !important;
    border-width: 2px !important;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
}

/* Validierungsnachricht unter dem Input */
.validation-message {
    color: #dc3545 !important;
    font-size: 0.875rem !important;
    margin-top: 0.25rem !important;
    display: block !important;
    font-weight: 500 !important;
}

/* Für modified Felder */
.modified:not([type=checkbox]).invalid {
    border-color: #dc3545 !important;
    border-width: 2px !important;
}

.quantity-input {
    /* Erzwingt die Text-Zentrierung */
    text-align: center !important;

    /* Entfernt das Standard-Browser-Styling für Zahlenfelder */
    -moz-appearance: textfield;
    appearance: textfield;
}

/* Versteckt die kleinen Spinner-Pfeile, die in manchen Browsern 
   trotz readonly auftauchen könnten */
.quantity-input::-webkit-inner-spin-button,
.quantity-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.password-forget{
    color: var(--link-color) !important;
}

.password-forget:hover{
    color: var(--link-color-hover) !important;
}