/* === CSS Variablen für professionelles Theming === */
:root {
    --primary-color: #006699; /* Ihr gewünschter Blauton */
    --primary-hover: #00507a; /* Etwas dunkler für Hover-Effekte */
    --background-color: #f8f9fa;
    --text-color: #212529;
    --heading-font: 'Inter', sans-serif;
    --body-font: 'Inter', sans-serif;
    --border-radius: 0.5rem;
    --box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* === Globale Stile === */
body {
    background-color: var(--background-color);
    font-family: var(--body-font);
    color: var(--text-color);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    flex-grow: 1;
}

h1, h2, h3, h4, h5, h6, .navbar-brand {
    font-family: var(--heading-font);
    font-weight: 600;
}

/* === Navbar === */
.navbar {
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    /* NEU: Stellt sicher, dass die Navbar über dem sticky Sidebar-Kontext liegt */
    z-index: 1030; 
}
.navbar-brand strong {
    color: var(--primary-color);
}
.navbar .nav-link {
    font-weight: 500;
    color: #6c757d;
}
.navbar .nav-link:hover {
    color: var(--primary-color);
}

/* === Buttons === */
.btn {
    border-radius: var(--border-radius);
    font-weight: 500;
    padding: 0.75rem 1.5rem;
}
.btn-primary, .bg-primary {
    /* Diese Regel gilt jetzt für Buttons UND Hintergründe */
    background-color: var(--primary-color) !important; /* Wichtig, um Bootstrap zu überschreiben */
    border-color: var(--primary-color) !important;
}
.btn-primary:hover {
    background-color: var(--primary-hover) !important;
    border-color: var(--primary-hover) !important;
}

/* === Hero Section auf der Startseite === */
.hero-section {
    background-color: var(--primary-color);
    background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('https://images.unsplash.com/photo-1542903667-285f2651d638?auto=format&fit=crop&w=1920&q=80');
    background-size: cover;
    background-position: center;
}

/* === Karten-Styling === */
.card {
    border: none;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
}

/* === Konversationen / Chat-Bubbles === */
.message-history .card {
    max-width: 75%; /* Maximale Breite bleibt, um Zeilenumbrüche zu erzwingen */
    width: auto;    /* NEU: Breite passt sich dem Inhalt an */
}

/* === Formulare === */
.form-control {
    border-radius: var(--border-radius);
    padding: 0.75rem 1rem;
}
.form-control:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(0, 102, 153, 0.25);
}

/* === Footer === */
footer {
    font-size: 0.9rem;
}

/* === Flash Nachrichten (Toasts) === */
.flash-container {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1060;
    width: auto;
    max-width: 90%;
}

.flash-container .alert {
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    opacity: 1;
    transition: opacity 0.5s ease-out;
}

.flash-container .alert.fade-out {
    opacity: 0;
}

/* === Interaktive Tabellenzeilen === */
.table-hover .clickable-row:hover {
    cursor: pointer;
    background-color: #f1f3f5;
}

/* === Avatar Dropdown in Navbar === */
.avatar-dropdown .dropdown-toggle::after {
    display: none; /* Hide the default Bootstrap arrow */
}

.avatar-image {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #dee2e6;
}

.avatar-placeholder {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: #e9ecef;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
    font-weight: bold;
    border: 2px solid #dee2e6;
}

/* === Konversations-Header (Profil-Reiter) === */
.profile-tab {
    background-color: #f8f9fa; /* Heller Grauton */
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid #dee2e6;
    border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);
}
.profile-tab a {
    color: var(--text-color); /* Dunkler, dezenter Text */
    text-decoration: none;
    font-weight: 500;
}
.profile-tab a:hover {
    color: var(--primary-color); /* Blau nur beim Darüberfahren */
}

/* === Karussell / Showcase === */
.carousel-fade .carousel-item {
    transition: opacity 1.5s ease-in-out; /* Verlangsamt den Fade-Effekt */
}

/* === Dashboard / Tabs === */
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
    color: var(--primary-color);
    border-color: #dee2e6 #dee2e6 var(--primary-color);
}
.nav-tabs .nav-link:not(.active) {
    color: #495057; /* Ein dezentes Grau für inaktive Tabs */
    border-color: transparent;
}
.nav-tabs .nav-link:not(.active):hover {
    color: var(--primary-hover); /* Deine Markenfarbe beim Darüberfahren */
    border-color: #e9ecef;
}

/* === NEU: Helfer-Klasse für Links === */
.link-themed {
    color: var(--primary-color);
    text-decoration: underline;
}
.link-themed:hover {
    color: var(--primary-hover);
    text-decoration: none;
}
/* NEU: Klasse für dezente Links in der Markenfarbe */
.link-discreet {
    color: var(--primary-color); /* Nutzt die bereits definierte Farbe #006699 */
    text-decoration: none;     /* Entfernt den Unterstrich */
}

.link-discreet:hover {
    text-decoration: underline; /* Fügt den Unterstrich beim Darüberfahren wieder hinzu */
}

/* NEU: Weniger Innenabstand für die Auswahlboxen in der Haupt-Suchleiste */
.hero-section .form-select {
    padding-left: 0.5rem; /* Reduziert den linken Abstand */
    padding-right: 2.5rem; /* Stellt sicher, dass der Pfeil Platz hat */
}

/* NEU: Eigene Farbe für spezifische Icons/Zahlen auf der Startseite */
.how-it-works-section .step-icon i,
.categories-section .category-card i,
.showcase-section h3 {
    color: #0a6caa !important; /* !important überschreibt das text-primary von Bootstrap */
}

/* Optional: Farbe für den Hover-Effekt der Kategorie-Karten anpassen */
.categories-section .category-card:hover i {
    color: #ffffff !important; /* Icons werden weiß, wenn man über die Karte fährt */
}
.categories-section .category-card:hover {
    background-color: #0a6caa; /* Kartenhintergrund wird dunkelblau */
    color: #ffffff; /* Text in der Karte wird weiß */
}
/* === Login Page Links === */
.login-links-container .forgot-password-link {
    font-size: 0.85rem; /* Schriftgröße verkleinern */
    vertical-align: middle; /* Vertikal an Button anpassen */
}

.login-links-container .register-prompt {
    color: var(--text-color); /* Standardtextfarbe für "Noch kein Konto?" */
    vertical-align: middle; /* Vertikal an Button anpassen */
}

/* Optional: Feinabstimmung für den Button, falls nötig */
.login-links-container .register-link-button {
    /* Bootstrap Klassen 'btn btn-success btn-sm' machen das meiste. */
    /* Hier könnten bei Bedarf weitere Anpassungen erfolgen, z.B.: */
    /* margin-left: 0.5rem; */
    /* padding: 0.25rem 0.6rem; */
    text-decoration: none; /* Sicherstellen, dass kein Unterstrich da ist */
}

/* === Mobile Dashboard Optimierungen === */
@media (max-width: 576px) {
    /* 1. Button oben rechts */
    .btn-sm-mobile {
        padding: 0.25rem 0.5rem;
        font-size: 0.85rem;
    }

    /* 2. Die Tabs (Reiter) oben */
    .nav-tabs {
        flex-wrap: nowrap; /* Zwingt alles in eine Zeile */
        overflow-x: auto;  /* Erlaubt wischen, falls es doch zu eng wird */
        overflow-y: hidden;
        white-space: nowrap;
        scrollbar-width: none; /* Scrollbalken verstecken (Firefox) */
    }
    .nav-tabs::-webkit-scrollbar { 
        display: none; /* Scrollbalken verstecken (Chrome/Safari) */ 
    }
    .nav-tabs .nav-link {
        font-size: 0.75rem; /* Sehr kleine Schrift */
        padding: 0.4rem 0.3rem; /* Kaum Abstand */
        min-width: auto; /* Keine Mindestbreite */
    }

    /* 3. Die Tabelle */
    .table {
        font-size: 0.75rem; /* Schrift in der ganzen Tabelle kleiner */
    }
    .table th {
        font-size: 0.7rem; /* Überschriften noch etwas kleiner */
        padding: 0.4rem 0.1rem !important; /* Extrem wenig Abstand */
        text-transform: uppercase; /* Optional: Macht kleine Schrift lesbarer */
        letter-spacing: -0.5px; /* Platz sparen */
    }
    .table td {
        padding: 0.4rem 0.1rem !important;
        vertical-align: middle;
    }

    /* 4. Die Aktions-Buttons (Stift, Pause etc.) */
    .action-button {
        padding: 0.1rem 0.25rem !important; /* Winzige Buttons */
        font-size: 0.7rem !important;
        width: 24px; /* Feste kleine Breite */
        height: 24px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Abstand zwischen den Icons verringern */
    .gap-1 {
        gap: 0.15rem !important;
    }
}