/*
 * Eigene Anpassungen zu Bootstrap 5.3
 * Hausfarben Diesel: dunkles Dieselbraun (Navbar), Bernstein (Buttons, Links), Gold (Schriftzug)
 * Kontrast zu Weiß: Bernstein #b45309 5,0:1, Rostbraun #92400e 7,1:1 (WCAG AA ab 4,5)
 */

:root {
    --diesel-haupt: #b45309;          /* Bernstein: Buttons, Links (Tailwind amber-700) */
    --diesel-haupt-dunkel: #92400e;   /* Rostbraun: Hover, aktiv (Tailwind amber-800) */
    --diesel-haupt-hell: #fef3c7;     /* Bernstein sehr hell: Hinterlegungen (Tailwind amber-100) */
    --diesel-navbar: #2b2118;         /* Dieselbraun */
    --diesel-navbar-hell: #3d2e1f;    /* Navbar Hover, Trennlinie */
    --diesel-gold: #f59e0b;           /* Schriftzug, aktiver Menüpunkt (Tailwind amber-500) */
    --diesel-hintergrund: #f5f3ef;    /* warmes Hellgrau */
    --diesel-footer: #e7e3dc;

    --bs-primary: var(--diesel-haupt);
    --bs-primary-rgb: 180, 83, 9;
    --bs-link-color: var(--diesel-haupt);
    --bs-link-color-rgb: 180, 83, 9;
    --bs-link-hover-color: var(--diesel-haupt-dunkel);
    --bs-link-hover-color-rgb: 146, 64, 14;
    /* Weiß für Cards, Tabellen, Eingabefelder, Dropdowns (Bootstrap nimmt dafür --bs-body-bg),
       das Grau der Seite kommt direkt auf body */
    --bs-body-bg: #fff;
    --bs-focus-ring-color: rgb(180 83 9 / 0.25);
}

body {
    background-color: var(--diesel-hintergrund);
}

/* Buttons in der Hausfarbe (Bootstrap setzt die Button-Farben fest, nicht über --bs-primary) */
.btn-primary {
    --bs-btn-bg: var(--diesel-haupt);
    --bs-btn-border-color: var(--diesel-haupt);
    --bs-btn-hover-bg: var(--diesel-haupt-dunkel);
    --bs-btn-hover-border-color: var(--diesel-haupt-dunkel);
    --bs-btn-active-bg: var(--diesel-haupt-dunkel);
    --bs-btn-active-border-color: var(--diesel-haupt-dunkel);
    --bs-btn-disabled-bg: var(--diesel-haupt);
    --bs-btn-disabled-border-color: var(--diesel-haupt);
    --bs-btn-focus-shadow-rgb: 180, 83, 9;
}

.btn-outline-primary {
    --bs-btn-color: var(--diesel-haupt);
    --bs-btn-border-color: var(--diesel-haupt);
    --bs-btn-hover-bg: var(--diesel-haupt);
    --bs-btn-hover-border-color: var(--diesel-haupt);
    --bs-btn-active-bg: var(--diesel-haupt-dunkel);
    --bs-btn-active-border-color: var(--diesel-haupt-dunkel);
    --bs-btn-focus-shadow-rgb: 180, 83, 9;
}

/* Pflichtfelder: Sternchen hinter dem Label (BootstrapUI setzt die Klasse required am Wrapper).
   Formulare, in denen alle Felder Pflicht sind, bekommen .ohne-pflichtmarkierung */
.required > .form-label::after,
.pflicht-stern {
    color: var(--diesel-haupt);
    font-weight: 600;
}

.required > .form-label::after {
    content: " *";
}

.ohne-pflichtmarkierung .required > .form-label::after {
    content: none;
}

/* Fokus, Checkboxen, Blättern und Dropdowns: Bootstrap hat hier Blau fest einkompiliert */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: #e0a066;
    box-shadow: 0 0 0 0.25rem rgb(180 83 9 / 0.25);
}

.form-check-input:checked {
    background-color: var(--diesel-haupt);
    border-color: var(--diesel-haupt);
}

.pagination {
    --bs-pagination-active-bg: var(--diesel-haupt);
    --bs-pagination-active-border-color: var(--diesel-haupt);
    --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgb(180 83 9 / 0.25);
}

.dropdown-menu {
    --bs-dropdown-link-active-bg: var(--diesel-haupt);
}

/* ---- Navbar ---------------------------------------------------------- */

.navbar-diesel {
    background-color: var(--diesel-navbar);
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

.navbar-diesel .navbar-brand,
.navbar-diesel .navbar-brand:hover,
.navbar-diesel .navbar-brand:focus {
    font-weight: 400;
    color: var(--diesel-gold);
}

/* Am Handy kleiner, damit Schriftzug und Menü-Symbol in eine Zeile passen */
@media (max-width: 575.98px) {
    .navbar-diesel .navbar-brand {
        font-size: 1rem;
        margin-right: 0.5rem;
    }
}

.navbar-diesel .nav-link {
    color: #fff;
    border-radius: 0.25rem;
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
}

.navbar-diesel .nav-link:hover,
.navbar-diesel .nav-link:focus {
    color: #fff;
    background-color: var(--diesel-navbar-hell);
}

/* Aktiver Menüpunkt: am Desktop gold unterstrichen, am Handy hinterlegt */
.navbar-diesel .nav-link.active {
    color: #fff;
    text-decoration: underline;
    text-decoration-color: var(--diesel-gold);
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
}

@media (max-width: 767.98px) {
    .navbar-diesel .nav-link.active {
        text-decoration: none;
        color: var(--diesel-gold);
        background-color: var(--diesel-navbar-hell);
    }

    .navbar-diesel .navbar-collapse {
        padding-bottom: 0.5rem;
    }
}

/* Name + Abmelden: am Handy durch eine Linie vom Menü getrennt (wie diesel-neu) */
@media (max-width: 767.98px) {
    .navbar-diesel .nav-rechts {
        border-top: 1px solid var(--diesel-navbar-hell);
        margin-top: 0.5rem;
        padding-top: 0.5rem;
    }
}

/* ---- Impersonate-Leiste ---------------------------------------------- */

.impersonate-bar {
    background-color: #dc2626; /* Tailwind red-600 */
    color: #fff;
    font-size: 0.875rem;
}

.impersonate-bar .btn-link {
    color: #fff;
    font-size: inherit;
}

/* ---- Footer ---------------------------------------------------------- */

.footer-diesel {
    background-color: var(--diesel-footer);
    color: #4b5563; /* Tailwind gray-600 */
    font-size: 0.875rem;
}

/* ---- Admin-Seitenleiste ---------------------------------------------- */

.admin-nav .nav-link {
    color: var(--bs-body-color);
    border-radius: 0.25rem;
}

.admin-nav .nav-link:hover {
    background-color: var(--diesel-hintergrund);
}

.admin-nav .nav-link.active {
    color: var(--diesel-haupt-dunkel);
    background-color: var(--diesel-haupt-hell);
}

/* ---- Meine Tankungen: feste Spaltenbreiten ------------------------------
   Alle Tabellen (pro Schlüssel und Gesamt) gleich aufgeteilt, damit Liter und €
   untereinander stehen. Am Handy ist die €/l-Spalte ausgeblendet, der Rest teilt sich den Platz. */

.tabelle-tankungen {
    table-layout: fixed;
}

.tabelle-tankungen tr > :nth-child(1) {
    width: 40%;
}

.tabelle-tankungen tr > :nth-child(n+2) {
    width: 20%;
}

/* ---- Formularzeilen mit Button ----------------------------------------
   BootstrapUI legt jedes Feld in einen Wrapper mit mb-3, die Button-Spalte hat keinen.
   In Zeilen mit .align-items-end (Felder und Button nebeneinander) stünde der Button
   deshalb 1rem tiefer als die Eingabefelder. Den Abstand übernimmt hier der Gutter der Zeile. */

.row.align-items-end > [class*="col"] > .mb-3 {
    margin-bottom: 0 !important;
}

/* ---- Tooltips ---------------------------------------------------------- */

/* Text mit Tooltip erkennbar machen */
.tooltip-hinweis {
    text-decoration: underline dotted;
    text-underline-offset: 0.2em;
    cursor: help;
}

/* Mehrzeiliger Tooltip: Zeilenumbrüche aus data-bs-title übernehmen */
.tooltip-zeilen .tooltip-inner {
    max-width: 22rem;
    white-space: pre-line;
    text-align: left;
}

/* ---- Mehrfachauswahl (Dropdown mit Checkboxen) ------------------------- */

.mehrfachauswahl-menue {
    min-width: max(100%, 16rem);
    max-width: calc(100vw - 2rem);
}

.mehrfachauswahl-liste {
    max-height: 18rem;
    overflow-y: auto;
}

/* ---- Nach oben --------------------------------------------------------- */

.nach-oben {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 1030;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
}

/* ---- Logs: Tage ein-/ausklappen ---------------------------------------- */

/* Kopfzeile des Tages ist der Umschalter */
.tag-umschalter {
    cursor: pointer;
    user-select: none;
}

.tag-umschalter .bi-chevron-down {
    display: inline-block;
    transition: transform 0.2s ease;
}

.tag-umschalter.collapsed .bi-chevron-down {
    transform: rotate(-90deg);
}