/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */
/* ==========================================================================
   Bootstrap 5 Navbar Styling (Passend zum HAML)
   ========================================================================== */

/* Navbar-Hintergrund mit dem gewünschten Blau-Verlauf */
.navbar.bg-light {
    background: linear-gradient(to bottom, #245d8b 0%, #4c99d5 100%) !important;
    padding-top: 10px;
    padding-bottom: 0; /* Tabs schließen bündig mit der Unterkante ab */
}

/* Menü und Logout-Button an der Unterkante ausrichten (überschreibt .align-items-center) */
.navbar > .container-fluid {
    align-items: flex-end !important;
}

/* Container-Flexbox auf Spalten umstellen, damit Row 1 und Row 2 sauber untereinander liegen */
.navbar > .container {
    flex-direction: column;
    align-items: flex-start;
}

/* ==========================================================================
   Zeile 1: Logos & Abteilung (Korrektur der absoluten Positionierung)
   ========================================================================== */
.navbar_images {
    position: relative;
    min-height: 90px; /* Gibt dem Inhalt Raum, da Kinder absolut positioniert sind */
    width: 100%;
}

.logo_goethe {
    position: absolute;
    left: 0;
    top: 5px;
    padding: 0 25px 0 0;
    border-right: 1px solid rgba(255, 255, 255, 0.4);
    width: 190px;
}

.logo_goethe img {
    max-width: 100%;
    height: auto;
}

/* ==========================================================================
   Zeile 2: Navigation als Tabs
   ========================================================================== */

/* Kleinerer Abstand zwischen den Tabs (überschreibt .me-3) */
.navbar .navbar-nav .nav-item.me-3 {
    margin-right: 4px !important;
}

/* Tab-Grundform: oben abgerundet, unten gerade */
.navbar .nav-link {
    color: #eee !important;
    padding: 10px 18px 12px !important;
    border-radius: 6px 6px 0 0;
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* Hover-Effekt */
.navbar .nav-link:hover,
.navbar .nav-link:focus-visible {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.15) !important;
}

/* Aktiver Tab: weiß bis zur Unterkante, geht nahtlos in den Seiteninhalt über
   (Klasse .active wird im Layout über nav_link_to / nav_active? gesetzt) */
.navbar .nav-link.active,
.navbar .nav-link.active:hover,
.navbar .nav-link.active:focus-visible {
    color: #245d8b !important;
    background-color: #ffffff !important;
}

/* Logout-Button nicht an die Unterkante kleben */
.navbar .ms-auto {
    margin-bottom: 8px;
}

/* Aktiver Eintrag im Konfigurations-Dropdown */
.navbar .dropdown-item.active,
.navbar .dropdown-item:active {
    background-color: #245d8b;
    color: #ffffff;
}

.navbar .nav-item.dropdown {
    position: relative;
}

/* Dropdown-Menü Anpassung */
.navbar .dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    background-color: #ffffff;
    border: none;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.navbar .dropdown-item:hover {
    background-color: #327ebb;
    color: white;
}

/* ==========================================================================
   Utility-Fixes (Buttons, Forms & Footer)
   ========================================================================== */

.form-horizontal .field_with_errors {
    margin: 0;
    display: block;
}

/* Garantiert weiße Schrift auf den Bootstrap-Buttons (wichtig bei grünem Logout) */
.btn-success, .btn-danger, .btn-primary {
    color: white !important;
}

.btn-xs {
    --bs-btn-padding-y: .125rem;
    --bs-btn-padding-x: .375rem;
    --bs-btn-font-size: .75rem;
    --bs-btn-border-radius: .2rem;
}

/* Fix für den Footer-Abstand im Uni-Design */
footer {
    color: #6c757d;
    font-size: 0.9rem;
}
footer a {
    color: #327ebb;
    text-decoration: none;
}
footer a:hover {
    text-decoration: underline;
}

.mytooltip {
    cursor: help;
    color: green;
    border-bottom: 1px dotted green
}