/* Eine schöne "Sattelbraun"-Farbe als Thema definieren */
:root {
    --horse-brown: #5D4037;
    --horse-light: #8D6E63;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Eigene Klassen für Bootstrap-Erweiterung */
.bg-brown {
    background-color: var(--horse-brown) !important;
}

.text-brown {
    color: var(--horse-brown) !important;
}

.btn-brown {
    background-color: var(--horse-brown);
    color: white;
    border: none;
}

.btn-brown:hover {
    background-color: var(--horse-light);
    color: white;
}

/* style.css */

.hero-section {
    /* WICHTIG: Die Höhe muss definiert sein, sonst ist der Bereich 0px hoch */
    min-height: 100vh; 
    width: 100%;
    
    /* Hintergrund-Eigenschaften */
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat;
    
    /* Flexbox, um den Text zu zentrieren */
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Falls das Bild im HTML nicht lädt, hier eine Fallback-Farbe */
    background-color: #5D4037; 
}

/* Login Seite Anpassung */
.min-vh-100 {
    min-height: 100vh;
    padding-top: 60px; /* Damit die Navbar nicht den Inhalt verdeckt */
}

/* Sidebar Styling */
.sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 100;
    padding: 48px 0 0; /* Höhe des mobilen Headers */
    box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
}

@media (max-width: 991.98px) {
    .sidebar {
        top: 56px;
        padding-top: 1rem;
        height: auto;
        position: static;
    }
}

.sidebar .nav-link {
    font-weight: 500;
    color: #333;
    padding: 10px 20px;
}

.sidebar .nav-link:hover {
    background-color: #f8f9fa;
    color: var(--horse-brown);
}

.sidebar .nav-link.active {
    background-color: rgba(93, 64, 55, 0.1);
    color: var(--horse-brown);
}

/* Hilfsklassen */
.icon-box {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Button für den Profil-Bereich */
.btn-outline-brown {
    color: var(--horse-brown);
    border-color: var(--horse-brown);
}

.btn-outline-brown:hover {
    background-color: var(--horse-brown);
    color: white;
}

.img-thumbnail {
    border: 3px solid var(--horse-brown);
}

/* Verhindert, dass die Sidebar den Anker-Link verdeckt */
#profil-section {
    scroll-margin-top: 80px;
}
.border-4 {
    border-width: 4px !important;
}

.bg-success-subtle {
    background-color: #d1e7dd;
}

/* Hintergrundbild für die Startseite */
.hero-section {
    background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), 
                url('img/hero-horses.jpg');
}

/* Fix für verzerrte Bilder */
.horse-card-img {
    width: 100%;
    height: 100%;       /* Nimmt die volle Höhe der Karte ein */
    object-fit: cover;
}

/* Optional: Damit die Karten alle exakt gleich hoch sind */
.card-equal-height {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Platz am unteren Rand schaffen, damit die App-Bar nichts verdeckt */
body {
    padding-bottom: 80px; /* Höhe der Navbar + Puffer */
}

/* Spezielle Textfarbe für aktives Icon (unser Braun) */
.text-brown {
    color: #5D4037 !important;
}

/* Desktop: Body-Padding wieder entfernen */
@media (min-width: 768px) {
    body {
        padding-bottom: 0;
    }
}

/* Anpassung der Sidebar für Mobile (Overlay-Effekt) */
@media (max-width: 767.98px) {
    #sidebarMenu {
        position: fixed;
        top: 0; /* Ganz oben starten, Header überdecken */
        left: 0;
        width: 75%; /* Nicht den ganzen Bildschirm bedecken */
        height: 100vh;
        z-index: 2000; /* Über allem liegen */
        background-color: white;
        border-right: 1px solid #ddd;
        box-shadow: 2px 0 10px rgba(0,0,0,0.1);
        padding-top: 1rem;
        /* Animation */
        transition: transform 0.3s ease-in-out;
    }
    
    /* Wenn eingeklappt, nach links schieben */
    #sidebarMenu.collapse:not(.show) {
        display: block; /* Bootstrap display none überschreiben */
        transform: translateX(-100%);
    }
    
    /* Hintergrund abdunkeln, wenn Menü offen ist (Optional, erfordert etwas JS) */
}

/* =========================================
   DASHBOARD & KARTEN DESIGN
   ========================================= */

/* 1. Hintergrund: Helles Grau lässt weiße Karten schweben */
main {
    background-color: #f3f4f6; 
    min-height: 100vh;
}

/* 2. Karten-Basis: Keine Ränder, weicher Schatten */
.card {
    border: none !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    transition: all 0.3s ease; /* Weiche Bewegung */
}

/* 3. Hover-Effekt: Karte hebt sich an */
.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

/* 4. Spezieller Schatten für farbige Widgets */
/* Damit sie etwas "tiefer" wirken */
.card.bg-success, 
.card.bg-primary, 
.card.bg-danger, 
.card.bg-warning,
.card.bg-gradient {
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
}

/* =========================================
   ANIMATIONEN & EFFEKTE
   ========================================= */

/* Weicher Farbübergang (z.B. von Grün auf Rot) */
.transition-bg { 
    transition: background-color 0.5s ease; 
}

/* Roter Mülleimer beim Drüberfahren (News) */
.hover-danger:hover {
    color: var(--bs-danger) !important; /* Nutzt Bootstrap Rot */
    opacity: 1 !important;
    cursor: pointer;
}

/* Pulsierender Punkt ("LIVE" Anzeige) */
.pulse-dot {
    width: 10px;
    height: 10px;
    background-color: #fff;
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
    animation: pulse-white 2s infinite;
}

@keyframes pulse-white {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
    }
    70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
    }
    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    }
}

/* Mobile Optimierung für Schriftgrößen */
@media (max-width: 767.98px) {
    .fs-md-5 { font-size: 1rem !important; }
}