/* Add your custom CSS here */

:root {
    --akzentfarbe: #1a6ecc;
    --akzentfarbedunkel: #1466c3;
    --akzenthintergrund: aliceblue;
    --weiss: #fff;
    --akzentfarbe-rgb: 26, 110, 204;  /* Fallback, will be overwritten by PHP */

    /* Override Bootstrap primary color with our accent color */
    --bs-primary: var(--akzentfarbe);
    --bs-primary-rgb: 26, 110, 204;
}

/* Font-Display Swap für FontAwesome (verhindert unsichtbaren Text beim Laden) */
@font-face {
    font-family: 'Font Awesome 6 Free';
    font-display: swap;
}

/* Set default link color for the main content to the accent color. */

a{
    color: var(--akzentfarbe);
}

/* Medizin gegen zu lange deutsche Wörter in Überschriften */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    hyphens: auto; /* Automatische Silbentrennung basierend auf dem lang-Attribut */
    overflow-wrap: break-word; /* Erzwingt Umbruch bei extrem langen Wörtern */
    word-wrap: break-word; /* Fallback */
}

/* Spezielle Korrektur für Dashboard-Kartenüberschriften (h5/h6) */
.card-header.h6, .card-title {
    font-size: clamp(0.9rem, 0.8rem + 0.5vw, 1.25rem); /* Verkleinert sich organisch auf kleinen Screens */
}

/* Custom alert for success messages */
.alert-success-custom {
    background-color: var(--akzenthintergrund);
    color: var(--akzentfarbe); /* Text color that contrasts well */
}

/* Custom Alert Styles */
.alert-info {
    --bs-alert-bg: var(--akzenthintergrund);
    --bs-alert-color: var(--akzentfarbedunkel);
    --bs-alert-border-color: var(--akzentfarbe);
    --bs-alert-link-color: var(--akzentfarbedunkel);
}

/* NEU: Darkmode-spezifische Anpassung für .alert-info */
[data-bs-theme="dark"] .alert-info {
    --bs-alert-bg: rgba(var(--akzentfarbe-rgb), 0.15);
    --bs-alert-color: var(--akzentfarbe);
    --bs-alert-border-color: rgba(var(--akzentfarbe-rgb), 0.3);
    --bs-alert-link-color: var(--akzentfarbe);
}

/* --- NEU: .bg-light für Dark Mode anpassen --- */
/* Ersetzt den hellen Hintergrund durch einen dunklen, der zum Theme passt. */
[data-bs-theme="dark"] .bg-light {
    background-color: var(--bs-secondary-bg) !important;
    color: var(--bs-body-color) !important;
}

/* --- NEU: Standard-Button-Farben für Dark Mode anpassen --- */
/* Verbessert die Lesbarkeit und das Aussehen von Standard-Buttons im Dark Mode. */
[data-bs-theme="dark"] .btn-light {
    --bs-btn-color: var(--bs-body-color);
    --bs-btn-bg: var(--bs-tertiary-bg);
    --bs-btn-border-color: var(--bs-border-color-translucent);
    --bs-btn-hover-bg: var(--bs-secondary-bg);
}

[data-bs-theme="dark"] .btn-outline-light {
    --bs-btn-color: var(--bs-tertiary-color);
    --bs-btn-border-color: var(--bs-tertiary-color);
    --bs-btn-hover-color: var(--bs-body-color);
    --bs-btn-hover-bg: var(--bs-tertiary-color);
}

[data-bs-theme="dark"] .btn-secondary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #5c636a; /* Etwas dunkleres Grau für besseren Kontrast */
    --bs-btn-border-color: #5c636a;
    --bs-btn-hover-bg: #495057;
}

.stat-widget {
    background-color: var(--akzentfarbe);
    color: var(--weiss);
    padding: 1rem;
    border-radius: var(--bs-border-radius);
}

.widget-bg-icon {
    position: absolute;
    right: -10px;
    bottom: -20px;
    font-size: 5rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.15);
    z-index: 1;
    line-height: 1;
    transform: rotate(-15deg);
}

/* NEU: Subtile Variante des Widget-Icons für helle Hintergründe */
.widget-bg-icon-subtle {
    position: absolute;
    right: 5px;  /* KORREKTUR: Weniger nach rechts verschoben */
    bottom: -5px; /* KORREKTUR: Weniger nach unten verschoben */
    font-size: 6rem; /* Etwas größer für mehr Präsenz */
    font-weight: 700;
    color: rgba(var(--akzentfarbe-rgb), 0.1); /* KORREKTUR: Subtile, transparente Akzentfarbe */
    z-index: 1;
    line-height: 1;
    transform: rotate(-15deg);
    transition: color 0.3s ease-in-out;
}

.stat-widget .stat-number {
    font-weight: 500;
    line-height: 1.2;
    /* Responsive font size for very large numbers */
    font-size: clamp(1.1rem, 0.9rem + 1.5vw, 2.5rem);
}

.stat-widget .stat-label {
    font-size: 0.9rem;
    /* The color is inherited from .stat-widget, but we set it explicitly with slight transparency */
    color: rgba(255, 255, 255, 0.75);
}

/* --- Comment Section --- */
.comment-section {
    max-height: 400px;
    overflow-y: auto;
}

/* --- Print View Styles --- */
@media print {
    .no-print {
        display: none !important;
    }
    body, .printable-content {
        margin: 0 !important;
        padding: 0 !important;
        font-size: 10pt; /* Base font size for printing */
        /* Global print baseline: Prevents browsers from falling back to serif fonts. */
        font-family: var(--bs-body-font-family, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
    }
    a {
        text-decoration: none;
        color: inherit;
    }

    /* Hide layout elements for printing */
    .sidebar, header, footer, .footer, #sidebar-toggler, .back-to-top {
        display: none !important;
    }

    /* Hide all buttons for printing */
    .btn, button, input[type="submit"], input[type="reset"], input[type="button"], .btn-close {
        display: none !important;
    }

    /* Reset main content layout */
    .main-content {
        margin-left: 0 !important;
        width: 100% !important;
    }
}

.table.layout-table {
    border: 1px solid #dee2e6;
}
.table.layout-table th, .table.layout-table td {
    border: 1px solid #dee2e6;
}
.table.layout-table thead th {
    background-color: #e9ecef;
}

.table.layout-list th, .table.layout-list td {
    border: none;
    border-bottom: 1px solid #dee2e6;
}
.table.layout-list thead th {
    border-bottom: 2px solid #343a40;
}

.table.layout-none th, .table.layout-none td {
    border: none;
}

.table.show-visible-only .col-hidden {
    display: none;
}

/* Special styles for record printing */
.print-card {
    border: 1px solid #dee2e6;
    break-inside: avoid; /* Prevents cards from breaking across pages */
}

/* Hide optional print sections by default */
.print-optional-section {
    display: none;
}
.print-card-header {
    background-color: transparent;
    border-bottom: 1px solid #dee2e6;
    padding: 0.5rem 1rem;
    font-size: 1.1rem;
    font-weight: 600;
}

.drag-handle {
    cursor: move;
}

/* --- NEU: View Transitions für flüssige Seitenübergänge --- */
/* Aktiviert die nativen Übergänge zwischen PHP-Seiten (MPA) */
@view-transition {
    navigation: auto;
}

@media (prefers-reduced-motion: no-preference) {
    /* 1. Den Hauptinhalt für die Animation benennen */
    main.container-fluid {
        view-transition-name: main-content-fade;
    }

    /* 3. Steuerung der Animation für den Inhaltsbereich */
    ::view-transition-group(main-content-fade) {
        animation-duration: 0.25s;
        animation-timing-function: ease-in-out;
    }

    ::view-transition-old(main-content-fade) {
        animation-name: slide-out;
    }

    ::view-transition-new(main-content-fade) {
        animation-name: slide-in;
    }
}

@keyframes slide-out {
    to { opacity: 0; transform: translateY(10px); }
}

@keyframes slide-in {
    from { opacity: 0; transform: translateY(-10px); }
}

/* --- Sidebar --- */
.sidebar {
    width: 300px;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    z-index: 1020; /* Erhöht, um über .clickable-in-readonly (z-index 1000) zu liegen */
    color: #fff;
    box-shadow: 4px 0px 12px rgba(0, 0, 0, 0.15);
    transition: width 0.3s ease;    
    /* Flexbox-Layout für die Sidebar */
    display: flex;
    flex-direction: column;
    height: 100vh;
}

.sidebar-header {
    flex-shrink: 0; /* Verhindert, dass der Header schrumpft */
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--akzentfarbe);
    white-space: nowrap; /* Prevents text from wrapping */
}

.sidebar-brand {
    color: #fff;
    text-decoration: none;
    font-size: 1.4rem;
}

.sidebar-brand:hover {
    color: #ddd;
}

.sidebar-brand-text {
    margin-left: 0.5rem;
}

.sidebar-brand-logo {
    width: 32px;
    height: 32px;
}

/* Style für den Sidebar-Toggler im Header */
#sidebar-toggler {
    font-size: 1.25rem;
    color: var(--bs-body-color);
}

.sidebar-nav-wrapper {
    flex-grow: 1; /* Nimmt den verfügbaren Platz ein */
    overflow-y: auto; /* Nur dieser Bereich wird scrollbar */

    /* Firefox: Scrollbalken-Farben für den dunklen Hintergrund anpassen */
    scrollbar-width: thin;
    scrollbar-color: var(--akzentfarbe) transparent;
}

/* Webkit: Verhindert den weißen Hintergrund (Rand) des Scrollbalkens in der Sidebar */
.sidebar-nav-wrapper::-webkit-scrollbar-thumb {
    border-color: #212529 !important; /* Entspricht dem dunklen Hintergrund der Sidebar (.bg-dark) */
}

#sidebar-toggler:hover {
    color: var(--akzentfarbe);
}

.sidebar-nav {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.sidebar-link {
    display: flex;
    align-items: center;
    padding: 1rem 1rem 1rem 1.25rem;
    color: #adb5bd;
    text-decoration: none;
    white-space: nowrap; /* Prevents text from wrapping */
    transition: background-color 0.2s ease, color 0.2s ease;
}

.sidebar-link[aria-expanded="true"] .fa-chevron-down {
    transform: rotate(180deg);
}

.sidebar-submenu-link {
    padding-left: 2.5rem !important; /* Stronger indentation for submenu items */
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}
.sidebar-submenu-link i {
    font-size: 0.9rem !important; /* Slightly smaller icons in the submenu */
}

.sidebar-submenu-header {
    padding: 0.75rem 1rem 0.25rem 2.5rem;
    font-size: 0.75rem;
    font-weight: 500; /* Slightly lighter than 600 */
    color: #adb5bd; /* Same color as normal menu items */
    font-variant: small-caps; /* Small caps for subtle emphasis */
}

.sidebar-submenu-link i {
    font-size: 0.9rem !important; /* Slightly smaller icons in the submenu */
}

.sidebar-divider {
    height: 1px;
    margin: 0.5rem 1rem; /* Some vertical spacing, matching the horizontal padding of the links */
    background-color: rgba(255, 255, 255, 0.15);
}

.sidebar-link:hover, .sidebar-link.active {
    background-color: #495057;
    color: #fff;
}
 
.sidebar-link {
    gap: 0.75rem; /* Einheitlicher Abstand zwischen Icon-Wrapper und Text */
}

.menu-icon-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25em; /* Feste Breite, die von FontAwesome's .fa-fw inspiriert ist */
    height: 1.25em; /* Sorgt für ein quadratisches Seitenverhältnis */
    flex-shrink: 0; /* Verhindert, dass der Wrapper schrumpft */
}

.menu-icon-wrapper > .sidebar-icon-img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Stellt sicher, dass das ganze Bild sichtbar ist, ohne es zu verzerren */
    border-radius: var(--bs-border-radius-sm); /* Leichte Abrundung für Bilder */
}
 
.sidebar-link i {
    /* Veraltete Regeln entfernt, da der Wrapper die Ausrichtung steuert */
    font-size: 1.2rem;
}

/* --- Collapsed State --- */
body.sidebar-collapsed .sidebar {
    width: 80px;
}

body.sidebar-collapsed .sidebar-brand-text,
body.sidebar-collapsed .sidebar-text {
    display: none;
}

/* Prevent the wrapper from clipping the fly-out menu in collapsed mode */
body.sidebar-collapsed .sidebar-nav-wrapper {
    overflow: visible !important;
}

/* --- Sidebar Submenu Logic --- */
.sidebar-item.has-submenu {
    position: relative;
}

/* --- Fly-out Submenus for COLLAPSED Sidebar --- */

/* When collapsed, the normal collapse functionality is disabled via JS.
   We use hover to show the submenu as a fly-out panel. */
body.sidebar-collapsed .sidebar-item.has-submenu:hover > .sidebar-submenu {
    display: block !important;
    position: fixed; /* Losgelöst vom Scroll-Container für perfekte Berechnung */
    left: 80px; /* Breite der eingeklappten Sidebar */
    top: 0; /* Wird per JS dynamisch überschrieben */
    margin-left: 1px;
    min-width: 240px;
    background-color: var(--bs-dark); /* Passt zum Dark-Mode der Sidebar */
    border: 1px solid var(--bs-border-color-translucent);
    box-shadow: var(--bs-box-shadow-lg);
    padding: 0.5rem 0;
    border-radius: var(--bs-border-radius); /* Vollständige Abrundung */
    z-index: 1021;
    max-height: 98vh;
    overflow-y: auto; /* Scrollbar hinzufügen, wenn nötig */
    pointer-events: auto;
}

/* Style the links inside the fly-out menu */
body.sidebar-collapsed .sidebar-submenu .sidebar-link {
    padding: 0.5rem 1rem;
    /* Ensure text is visible inside the fly-out */
    .sidebar-text {
        display: inline-block !important;
    }
}

/* Style the headers inside the fly-out menu */
body.sidebar-collapsed .sidebar-submenu .sidebar-submenu-header {
    padding: 0.5rem 1rem;
    font-size: 0.75rem;
    color: #adb5bd;
    display: block !important; /* Ensure header is visible */
}

/* Hide the dropdown chevron in collapsed mode */
body.sidebar-collapsed .sidebar-link .fa-chevron-down {
    display: none !important;
}

/* --- Sidebar Footer --- */
.sidebar-footer {
    flex-shrink: 0; /* Verhindert, dass der Footer schrumpft */
    text-align: left;
    padding-left: 1rem; /* Matching the padding of other sidebar elements */
    opacity: 1;
    transition: opacity 0.2s ease-in-out;
    background-color: var(--bs-dark); /* Stellt sicher, dass der Footer den gleichen Hintergrund wie die Sidebar hat */
}

body.sidebar-collapsed .sidebar-footer {
    opacity: 0;
    visibility: hidden;
    pointer-events: none; /* Prevents clicks on the invisible logo */
}

.sidebar-footer img {
    width: 64px;
    height: 64px;
    margin: 1rem 0; /* 1rem top/bottom margin, 0 left/right */
}

/* --- Layout Adjustments --- */
/* Adds space below the main content to create "air" to the footer. */
main.container {
    margin-bottom: 3rem;
}

/* --- Main Content --- */
.main-content {
    margin-left: 300px;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    width: auto; /* KORREKTUR: Breite automatisch anpassen lassen */
    transition: margin-left 0.3s ease, width 0.3s ease; /* KORREKTUR: width zur Transition hinzufügen */
}

/* --- Header Title Truncation --- */
.header-title-truncate {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 60vw; /* Begrenzung auf 60% der Viewport-Breite */
    min-width: 0;
}

body.sidebar-collapsed .main-content {
    margin-left: 80px; /* KORREKTUR: margin an die eingeklappte Sidebar anpassen */
    /* width wird durch margin-left automatisch angepasst */
}


.main-content > main {
    flex-grow: 1;
    padding-bottom: 350px; /* Massiv erhöht für lange Intex-Select Listen am Seitenende */
}

/* --- Haptik & Schatten --- */

/* Shadow for cards and the main content box */
.rounded-3 {
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.07);
    transition: box-shadow 0.3s ease;
}

.rounded-3:hover {
    box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.1);
}

.btn:hover {
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.15);
}

/* --- Responsive Anpassungen --- */
@media (max-width: 991.98px) {
    /* --- Statistik-Widgets (Summe, Anzahl etc.) Platzoptimierung --- */
    .stat-widget {
        padding: 0.5rem 0.75rem !important;
        min-height: 70px;
    }

    .stat-widget .stat-number {
        /* Kleinere Schrift auf Tablets/Phones, um Überlauf bei großen Euro-Werten zu verhindern */
        font-size: 1.1rem !important;
        letter-spacing: -0.02em; /* Engerer Zeichenabstand spart wertvolle Pixel */
    }

    .stat-widget .stat-label {
        font-size: 0.65rem !important;
        margin-top: 2px;
        opacity: 0.8;
    }

    /* Verkleinert das Hintergrund-Icon, damit es nicht mit langen Zahlen kollidiert */
    .stat-widget .widget-bg-icon,
    .stat-widget .widget-bg-icon-subtle {
        font-size: 2.5rem !important;
        right: 2px;
        bottom: 2px;
    }

    /* Tablet Portrait: Erlaubt das Umbrechen von Buttons in der Aktionsleiste */
    .card-footer.d-flex,
    .card-footer .d-flex,
    .modal-footer .d-flex {
        flex-wrap: wrap !important;
    }

    /* Sorgt für vertikalen Abstand zwischen den Button-Gruppen (Links/Rechts) im Footer */
    .card-footer.d-flex {
        gap: 1rem !important;
        /* Auf schmalen Tablets sieht eine Zentrierung der Buttons oft sauberer aus */
        justify-content: center !important;
        text-align: center;
    }

    /* Kompakte Statistik-Zahlen auf der Startseite für Tablets optimieren */
    .stat-number-small {
        font-size: 1.5rem !important;
        letter-spacing: -0.01em;
    }

    .stat-label-small {
        font-size: 0.725rem !important;
        letter-spacing: -0.02em; /* Engerer Zeichenabstand spart Platz */
    }

    /* --- Responsive Sidebar (Mobile) --- */ 
    .sidebar {
        position: fixed; 
        left: -300px; /* Start hidden off-screen */
        z-index: 1040; /* Higher than overlay */
        transition: left 0.3s ease-in-out;
    }

    .sidebar.show {
        left: 0; /* Slide in */
    }


    /* On mobile, the content always takes full width */
    .main-content {
        margin-left: 0;
    }

    .sidebar-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 1039; /* Below sidebar, above content */
        display: none; /* Hidden by default */
    }

    .sidebar-overlay.show {
        display: block;
    }

    /* Hide logo in footer on mobile devices */
    .sidebar-footer {
        display: none;
    }

    /* Tablet Portrait & Mobile: Buttons in Containern sauber umbrechen */
    .card-footer, 
    .modal-footer, 
    .mb-3:has(> .btn + .btn) {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 0.5rem !important; /* Erzeugt Abstand horizontal UND vertikal beim Umbruch */
    }

    /* Reset horizontaler Margins (ms-2), damit Buttons in der neuen Zeile nicht eingerückt sind */
    .card-footer .btn, 
    .modal-footer .btn, 
    .mb-3:has(> .btn + .btn) > .btn {
        margin: 0 !important;
    }
}

/* --- Smartphone-specific overrides --- */
@media (max-width: 767.98px) {
    /* Hide username in header to save space */
    /* Targets a span or strong element inside a dropdown toggle that also contains an image (the avatar) */
    header .dropdown-toggle:has(img) span,
    header .dropdown-toggle:has(img) strong {
        display: none;
    }

    /* Remove margin from avatar when username is hidden */
    header .dropdown-toggle:has(img) img.me-2 {
        margin-right: 0 !important;
    }
}

/* --- Form Component Styles --- */
.color-picker-wrapper {
    max-width: 200px;
}

/* --- Form Alignment Fix --- */
/* Richtet Buttons/Schalter vertikal an Eingabefeldern aus, wenn diese 
   in einer Zeile neben Feldern MIT Label stehen. */
@media (min-width: 768px) {
    .form-field-valign-fix {
        /* Kompensiert Label-Höhe + Margin. 31px verhindert den optischen Versatz
           zwischen Eingabefeld-Borders und Button-Oberkanten. */
        padding-top: 31px;
    }
}

/* --- Component Overrides --- */
/*
 * We directly override Bootstrap's internal button variables
 * to ensure they reliably adopt our dynamically set theme colors.
*/
.btn-primary {
    /* Direct assignment as a fallback in case variable override fails */
    color: #fff;
    background-color: var(--akzentfarbe, #1A6ECC);
    border-color: var(--akzentfarbe, #1A6ECC);

    /* Continue to set Bootstrap variables for hover/active/focus states */
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--akzentfarbedunkel, #1466c3);
    --bs-btn-hover-border-color: var(--akzentfarbedunkel, #1466c3);
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb, 26, 110, 204);
    --bs-btn-active-bg: var(--akzentfarbedunkel, #1466c3);
    --bs-btn-active-border-color: var(--akzentfarbedunkel, #1466c3);
}

/* --- NEU: Split-Button Bereich optisch abheben --- */
/* Verwendet die dunklere Akzentfarbe für den Dropdown-Teil, um die Klickbarkeit zu betonen */
.btn-group > .btn-primary.dropdown-toggle-split {
    background-color: var(--akzentfarbedunkel) !important;
    border-color: var(--akzentfarbedunkel) !important;
    padding-left: 0.75rem; /* Vergrößert das Trefferziel für den Klick */
    padding-right: 0.75rem;
}

/* Subtiler Hover-Effekt für den Split-Teil */
.btn-group > .btn-primary.dropdown-toggle-split:hover {
    filter: brightness(0.95);
}

.btn-outline-primary {
    --bs-btn-color: var(--akzentfarbe, #1A6ECC);
    --bs-btn-border-color: var(--akzentfarbe, #1A6ECC);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--akzentfarbe, #1A6ECC);
    --bs-btn-hover-border-color: var(--akzentfarbe, #1A6ECC);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--akzentfarbedunkel, #1466c3);
    --bs-btn-active-border-color: var(--akzentfarbedunkel, #1466c3);
    --bs-btn-disabled-color: var(--akzentfarbe, #1A6ECC);
    --bs-btn-disabled-border-color: var(--akzentfarbe, #1A6ECC);
}


/* Visually adjust disabled primary button */
.btn-primary:disabled {
    background-color: var(--bs-secondary-bg);
    border-color: var(--bs-secondary-bg);
    color: var(--bs-secondary-color);
}

/* Custom background color for special cards (e.g., filter panel) */
.card-theme-bg {
    background-color: var(--akzenthintergrund);
}

[data-bs-theme="dark"] .card-theme-bg {
    /* A very subtle, transparent version of the accent color for the background in dark mode */
    background-color: rgba(var(--bs-primary-rgb), 0.1); /* KORREKTUR: Subtile Hintergrundfarbe statt transparent */
    border-color: var(--akzentfarbe);
    border-width: 1px; /* KORREKTUR: Dünnerer Rand für dezentere Optik */
}

/* Bind btn-link to the darker accent color */
.btn-link {
    --bs-btn-color: var(--akzentfarbedunkel);
    --bs-btn-hover-color: var(--akzentfarbe); /* Slightly lighter on hover for better feedback */
    --bs-btn-active-color: var(--akzentfarbe);
}

/* Bind form elements to accent color */
.form-control:focus,
.form-select:focus {
    border-color: var(--akzentfarbedunkel) !important;
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25), 0 2px 5px rgba(0, 0, 0, 0.15) !important;
}

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

.form-check-input[type=checkbox]:indeterminate {
    background-color: var(--akzentfarbe);
    border-color: var(--akzentfarbe);
    /* Das Icon (der Strich) bleibt weiß für besten Kontrast */
    --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e");
}

.form-check-input:focus {
    border-color: var(--akzentfarbedunkel);
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}



/* Dropdown menu items on click in accent color */
.dropdown-item.active, .dropdown-item:active {
    color: var(--bs-dropdown-link-active-color);
    text-decoration: none;
    background-color: var(--akzentfarbe) !important
}

/* --- Tab Styling --- */
.nav-tabs {
    border-bottom-color: #dee2e6; /* Default separator line */
}

.nav-tabs .nav-link {
    color: #6c757d; /* Bootstrap's default gray */
    transition: all 0.2s ease;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    color: #fff;
    background-color: var(--akzentfarbe);
    border-color: var(--akzentfarbe) var(--akzentfarbe) #fff;
}

.nav-tabs .nav-link:hover:not(.active) {
    color: var(--akzentfarbe);
    border-color: #e9ecef #e9ecef var(--akzentfarbe); /* BS default light borders + accent bottom border */
}

/* --- Custom Table Grouping --- */
.table-group-header td {
    background-color: var(--akzenthintergrund) !important; /* !important to override Bootstrap's striped styles */
    font-weight: bold;
    color: #000; /* Color set to black */
    font-variant: small-caps; /* Small caps added */
}

[data-bs-theme="dark"] .table-group-header td {
    background-color: rgba(var(--bs-primary-rgb), 0.15) !important;
    color: var(--bs-body-color); /* Default text color for readability in dark mode */
    font-variant: small-caps;
}

/* NEU: Styling für die Zeilennummer beim Hovern */
.row-number-header {
    color: var(--bs-secondary-color);
    font-weight: 500;
}

/* Wir erhöhen die Spezifität, um die Standard-Tabellenfarbe von Bootstrap zu überschreiben. */
.row-number-cell {
    text-align: center;
    font-weight: 500;
    /* Setzen der Farbe über die von Bootstrap verwendete CSS-Variable, um Kaskadierungsprobleme zu vermeiden. */
    --bs-table-color-state: var(--bs-tertiary-color);
    /* Die Nummer ist standardmäßig dezent sichtbar */
    transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
}

.table-hover > tbody > tr:hover > .row-number-cell {
    color: var(--bs-body-color); /* Beim Hovern der Zeile in der Haupttextfarbe hervorheben */
}

.table-value-cell {
    padding-left: 2.5rem !important;
}

.table-hover>tbody>tr:hover>* {
    --bs-table-color-state: var(--bs-body-color); /* Textfarbe auf Standard-Textfarbe setzen */
    --bs-table-bg-state: var(--akzenthintergrund);
}

/* Kleinere Statistik-Zahlen für kompakte Widgets */
.stat-number-small {
    font-size: 2.2rem;
    font-weight: 600;
}

/* Kleinere Statistik-Labels für kompakte Widgets */
.stat-label-small {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.75);
}

/*
 * Hintergrund-Icon für die Spalten in der Team-Statistik-Karte.
 * Diese Regel platziert die Icons groß, transparent und gedreht
 * im Hintergrund der jeweiligen Statistik-Spalte.
*/
.stat-column-bg-icon {
    position: absolute;
    right: -10px;
    bottom: -10px;
    font-size: 3.5rem;
    color: rgba(255, 255, 255, 0.15);
    z-index: 1;
    transform: rotate(-15deg);
}

/* --- Back to Top Button --- */
.back-to-top {
    position: fixed;
    bottom: 25px;
    right: 25px;
    opacity: 0;
    visibility: hidden;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--akzentfarbe);
    color: #fff;
    transition: opacity 0.3s, visibility 0.3s;
    z-index: 99;
    text-decoration: none;
}

.back-to-top.active {
    opacity: 1;
    visibility: visible;
}

.back-to-top:hover {
    background: var(--akzentfarbedunkel);
    color: #fff;
}

/* Hide back-to-top on screens smaller than Full HD (1920px) */
@media (max-width: 1919px) {
    .back-to-top {
        display: none !important;
    }
}


[data-bs-theme="dark"] .table-hover>tbody>tr:hover>* {
    /* A darker, transparent version of the accent color for the background */
    --bs-table-color-state: var(--bs-body-color); /* Textfarbe auch im Dark Mode auf Standard setzen */
    --bs-table-bg-state: rgba(var(--bs-primary-rgb), 0.15);
}

.username-archived {
    font-weight: normal;
    text-decoration: line-through;
    color: var(--bs-secondary-color);
}

/* --- Dark Mode Overrides --- */
[data-bs-theme="dark"] .alert-success-custom {
    /* A darker, transparent version of the accent color for the background */
    background-color: rgba(var(--bs-primary-rgb), 0.15);
    color: var(--akzentfarbe);
    border: 1px solid rgba(var(--bs-primary-rgb), 0.2);
}

/* Adjust "Scroll to top" button in footer for dark mode */
[data-bs-theme="dark"] .footer .btn-light {
    --bs-btn-color: var(--bs-tertiary-color);
    --bs-btn-bg: var(--bs-body-secondary);
    --bs-btn-border-color: var(--bs-body-secondary);
    --bs-btn-hover-bg: var(--bs-tertiary-bg);
    --bs-btn-hover-border-color: var(--bs-tertiary-bg);
}



/* --- Pagination Overrides --- */
.pagination {
    /* Fallback, falls die spezifischere Regel nicht greift */
    font-family: var(--bs-body-font-family);
}

.page-item.active .page-link {
    background-color: var(--akzentfarbe);
    border-color: var(--akzentfarbe);
}

.page-link {
  font-family: system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  color: var(--akzentfarbe);
}


.page-link:hover {
    color: var(--akzentfarbedunkel);
}

.page-link:focus {
    /* Ensures the focus ring uses the dynamic accent color, consistent with other form elements. */
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}

/* --- Accordion Customization --- */
.accordion-button {
    font-weight: 600; /* Make title bold in both states */
}

.accordion-button:not(.collapsed) {
    color: var(--bs-accordion-btn-color); /* Keep default text color */
    background-color: var(--bs-secondary-bg); /* Use a subtle gray instead of the accent color */
    box-shadow: inset 0 calc(-1 * var(--bs-accordion-border-width)) 0 var(--bs-accordion-border-color);
}

.accordion-button:focus {
    /* Ensures the focus ring uses the dynamic accent color */
    border-color: var(--akzentfarbedunkel);
    box-shadow: none;
}

[data-bs-theme="dark"] .accordion-item {
    --bs-accordion-color: var(--bs-body-color);
}

/* Post-it style: Light background requires dark text even in dark mode */
.card-post-it {
    background-color: #fffacd;
    color: #212529;
    border-color: #f0e68c;
}
.card-post-it .card-header,
.card-post-it .card-body {
    background-color: transparent;
    border-color: #f0e68c;
}
.card-post-it .form-control {
    color: #212529;
}

/* NEU: Post-it Style für Accordions (aus Snippets zentralisiert) */
.accordion-item.card-post-it {
    border: 1px solid #f0e68c;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
    margin-bottom: 1.5rem;
    max-width: 50%;
}
.accordion-item.card-post-it .accordion-header {
    border-bottom: 0;
}
.accordion-item.card-post-it .accordion-button {
    background-color: #fffacd;
    font-size: 1.1rem;
    font-weight: bold;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    color: #555;
}
.accordion-item.card-post-it .accordion-button:not(.collapsed) {
    background-color: #fff8b6;
    box-shadow: inset 0 -1px 0 rgba(0,0,0,.125);
    color: #333;
}
.accordion-item.card-post-it .accordion-button:focus {
    box-shadow: 0 0 0 0.25rem rgba(var(--akzentfarbe-rgb), 0.25);
    z-index: 3;
}
.accordion-item.card-post-it .accordion-body {
    background-color: #fffdf0;
}

/* Force focus ring for all buttons to use the accent color and remove the default blue outline. */
.btn:focus,
.btn:focus-visible {
    outline: 0 !important;
    box-shadow: 0 0 0 0.25rem rgba(var(--akzentfarbe-rgb), 0.25) !important;
}

/* --- Custom Field Formatting --- */
.form-control-format-title {
    font-size: 1.25rem; /* Corresponds to h5 */
    font-weight: 600;
}

.text-format-title {
    font-size: 1.1rem; /* Slightly larger than normal text */
    font-weight: 600;  /* Medium font weight */
}

.text-format-bold {
    font-weight: 700;
}

/* General hover effect for cards that should lift up and get a colored border */
.card-hover-effect:hover,
.field-type-card:hover  {
    background-color: var(--akzenthintergrund);
    border-color: var(--bs-primary) !important;
    box-shadow: 0 .125rem .25rem rgba(var(--bs-primary-rgb), .25) !important;
    transform: translateY(-2px);
    transition: all 0.2s ease-in-out;
    cursor: pointer;
}
 /* Hover effect for the field type selection button on the add/edit field page */
[data-bs-theme="dark"] .card-hover-effect:hover,
[data-bs-theme="dark"] .field-type-card:hover {
    background-color: rgba(var(--akzentfarbe-rgb), 0.15); /* Subtile Akzentfarbe für den Hintergrund im Dark Mode */
}

#selected-field-type-display.btn-outline-secondary:hover {
    background-color: var(--akzenthintergrund);
    border-color: var(--akzentfarbe);
    color: var(--bs-body-color); /* Ensure text color remains readable */
}

[data-bs-theme="dark"] #selected-field-type-display.btn-outline-secondary:hover {
    background-color: rgba(var(--akzentfarbe-rgb), 0.15); /* Subtile Akzentfarbe für den Hintergrund im Dark Mode */
    border-color: var(--akzentfarbe); /* Behält den Akzentfarb-Rand bei */
    color: var(--bs-body-color); /* Behält die helle Textfarbe für den Dark Mode bei */
}


/* If a row has a color due to conditional formatting, the special text formats should retain their color */
[style*="--bs-table-color-state"] .text-format-title,
[style*="--bs-table-color-state"] .text-format-bold {
    color: inherit; /* Inherits the color from the cell set by the row rule */
}

/* Make field labels in card view more subtle */
.card-body strong.small.text-muted {
    font-weight: 500; /* Von "bold" auf "medium" reduziert */
    font-size: 0.75em; /* Etwas kleiner für mehr Subtilität */
    letter-spacing: 0.05em; /* Leichter Abstand zwischen den Buchstaben */
}

.currency-negative {
    color: var(--bs-danger);
    font-weight: 500;
}

.currency-positive {
    color: var(--bs-success);
}

.form-control-format-bold {
    font-weight: 700;
}

 @media print {
  /* Force a standard font for printing, but exclude Font Awesome icons */
  body, p, div, span, td, th, li, a {
    font-family: Arial, sans-serif !important;
  }
}

/* --- Custom Scrollbar Styling --- */
/* Works in Webkit-based browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar {
    width: 10px; /* Breite des gesamten Scrollbalkens */
    height: 10px; /* Höhe für horizontale Scrollbalken */
}

::-webkit-scrollbar-track {
    background: transparent; /* Hintergrund der Scroll-Leiste */
}

::-webkit-scrollbar-thumb {
    background-color: var(--akzentfarbe); /* Farbe des Scroll-Griffs */
    border-radius: 10px; /* Abgerundete Ecken */
    border: 3px solid var(--bs-body-bg); /* Ein kleiner Rand, damit es "schwebt" */
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--akzentfarbedunkel); /* Dunklere Farbe beim Hover */
}

/* Firefox Scrollbar Styling */
html {
    scrollbar-width: thin;
    scrollbar-color: var(--akzentfarbe) var(--bs-tertiary-bg);
}

/* --- NEU: Styling für die Icons auf der Einstellungsseite (preferences.php) --- */
.preference-card-icon {
  font-size: 2.5rem; /* Größer als fa-2x */
  transform: rotate(-15deg);
  color: var(--bs-secondary-color);
  transition: color 0.3s ease-in-out, transform 0.3s ease-in-out;
  opacity: 0.6;
}

.card-hover-effect:hover .preference-card-icon {
  color: var(--akzentfarbe);
  transform: rotate(0deg) scale(1.1); /* Dreht zurück und wird etwas größer */
  opacity: 1;
}

/* --- NEU: Styling für die Feldliste in der Tabellenstruktur-Bearbeitung --- */
.field-row-section-header {
  background-color: var(--akzenthintergrund);
  border-radius: var(--bs-border-radius-sm);
  margin-top: 0.5rem;
  font-weight: 600;
  font-size: 1.05rem;
}

[data-bs-theme="dark"] .field-row-section-header {
  background-color: rgba(var(--akzentfarbe-rgb), 0.15);
}

.field-row-section-header { padding: 0.5rem 1rem; }

.field-row-indented .row {
  padding-left: 2.5rem; /* Rückt die normalen Felder ein */
}

.field-list-scrollable {
    max-height: 60vh; /* Maximale Höhe von 60% der Bildschirmhöhe */
    overflow-y: auto;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    padding: 0.5rem;
}

 
 
 /* --- Custom Form Range Slider --- */
 /* Passt die Farbe des Schiebereglers an die Akzentfarbe an */

 /* Für Webkit-Browser (Chrome, Safari, Edge) */
 .form-range::-webkit-slider-thumb {
   background-color: var(--akzentfarbe) !important;
 }

 .form-range:focus::-webkit-slider-thumb {
   /* Passt den Fokus-Ring an die Akzentfarbe an */
   box-shadow: 0 0 0 1px var(--bs-body-bg), 0 0 0 0.25rem rgba(var(--akzentfarbe-rgb), 0.25);
 }

 

 /* Für Firefox */
 .form-range::-moz-range-thumb {
   background-color: var(--akzentfarbe);
 }

 .form-range:focus::-moz-range-thumb {
   /* Passt den Fokus-Ring an die Akzentfarbe an */
   box-shadow: 0 0 0 1px var(--bs-body-bg), 0 0 0 0.25rem rgba(var(--akzentfarbe-rgb), 0.25);
 }

 

 /* --- NEU: Dropzone für Datei-Uploads --- */
 .dropzone {
    border: 2px dashed var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    padding: 2rem;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
    position: relative;
 }

 .dropzone.is-dragover {
    border-color: var(--akzentfarbe);
    background-color: var(--akzenthintergrund);
 }

 .dropzone-instructions {
    pointer-events: none; /* Klicks gehen durch zum Input-Feld */
 }

 .dropzone-file-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
 }
 .dropzone.is-invalid {
    border-color: var(--bs-danger);
 }

 /* NEU: Roter Rahmen für die Dropzone bei einem Validierungsfehler */
.dropzone.is-invalid {
    border-color: var(--bs-danger);
}


/* --- NEU: Scrollbare Listen in Karten auf der Startseite --- */
.scrollable-card-list {
    max-height: 400px; /* Eine angemessene maximale Höhe */
    overflow-y: auto;
}

/* --- BUGFIX: Border-Radius für Input-Gruppen --- */
/* Erzwingt den korrekten border-radius für das erste Element (z.B. ein Icon) in einer .input-group.
   Dies behebt ein Rendering-Problem, das durch die dynamische Breitenänderung des .main-content
   Containers durch das Sidebar-Skript verursacht wird. */
.input-group > .input-group-text:first-child {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

/* Erzwingt den korrekten border-radius für das letzte Element (z.B. ein klickbares Icon) in einer .input-group.
   Dies behebt das gleiche Rendering-Problem für rechts-angehängte Elemente. */
.input-group > .input-group-text:last-child {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* Erzwingt den korrekten border-radius für ein .form-control, das von einem .input-group-text gefolgt wird.
   Dies behebt die Überlappung des Input-Feldes über das rechts angehängte Icon. */
.input-group > .form-control:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

/* Stellt sicher, dass ein Input-Feld, das direkt auf ein verstecktes Feld folgt (und somit visuell das erste ist),
   korrekte abgerundete Ecken auf der linken Seite hat. Wichtig für Lookup-Felder. */
.input-group > input[type="hidden"]:first-child + .form-control {
    border-top-left-radius: var(--bs-border-radius);
    border-bottom-left-radius: var(--bs-border-radius);
    border-top-left-radius: var(--bs-border-radius) !important;
    border-bottom-left-radius: var(--bs-border-radius) !important;
    margin-left: 0 !important;
}

/* --- NEU: Breadcrumb Styling --- */
/* Macht die Breadcrumb-Leiste unaufdringlicher und platzsparender. */
.breadcrumb-container {
    margin-top: -1rem; /* Reduziert den Abstand zum Header */
    padding-bottom: 0.75rem; /* Fügt Abstand zwischen Breadcrumb-Text und der neuen Linie hinzu */
    margin-bottom: 1.5rem; /* Behält den Abstand zum Inhalt darunter bei */
    border-bottom: 1px dashed var(--bs-border-color); /* Ihre vorgeschlagene Trennlinie, themen-kompatibel */
}
.breadcrumb {
    font-size: 0.875rem; /* Kleinere Schriftgröße */
    margin-bottom: 0 !important; /* Entfernt den Standard-Abstand von Bootstrap */
}
.breadcrumb a {
    text-decoration: none; /* Entfernt die Unterstreichung der Links */
}
.breadcrumb-item.active {
    font-weight: 500; /* Hebt das aktive Element leicht hervor */
}


/* --- NEU: Funktionale Icons farblich hervorheben --- */
/* Hebt klickbare Icons in Input-Gruppen farblich hervor und ändert den Cursor,
   um ihre Interaktivität klar zu signalisieren. */
.input-group-text.clickable-icon {
    color: var(--akzentfarbe);
    cursor: pointer;
}

/* --- KORREKTUR: Icon-Buttons in Tabellen quadratisch machen --- */
/* Diese Regel zielt auf kleine Buttons in Tabellenzellen, die nur ein Icon enthalten.
   Sie macht die Buttons quadratisch und zentriert das Icon perfekt.
   Die :has(:only-child) Pseudoklasse stellt sicher, dass nur Buttons betroffen sind,
   die ausschließlich ein <i>-Element (das Icon) enthalten. */
.table td .btn.btn-sm:has(i:only-child) {
    /* Feste Breite und Höhe für ein quadratisches Aussehen */
    width: 31px;  /* Entspricht der Standardhöhe von .btn-sm, kann bei Bedarf angepasst werden */
    height: 31px; /* Entspricht der Standardhöhe von .btn-sm, kann bei Bedarf angepasst werden */
    /* Padding entfernen und Flexbox für die Zentrierung nutzen */
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* --- NEU: Buttons in der Kartenansicht quadratisch machen --- */
/* Diese dedizierte Klasse sorgt für ein einheitliches, quadratisches Aussehen
   der Aktions-Buttons in der Kartenansicht (custom_table_view.php). */
.cardview-button-sm {
    width: 31px;
    height: 31px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* --- NEU: Breite des "Auswählen"-Buttons im Lookup-Modal korrigieren --- */
/* Diese Regel behebt das Problem, dass der "Auswählen"-Button im
   Lookup-Modal zu schmal war. Sie stellt sicher, dass der Button
   immer breit genug für seinen Inhalt (Icon + Text) ist. */
.select-lookup-record-btn {
    width: auto !important;      /* Hebt feste Breiten auf und passt sich dem Inhalt an */
    padding: 0.25rem 0.5rem !important; /* Fügt den Standard-Innenabstand für .btn-sm hinzu */
    white-space: nowrap;        /* Verhindert einen unerwünschten Zeilenumbruch */
}

/* --- NEU: Thumbnail-Styling für Dateivorschau in der Listenansicht --- */
.list-view-thumbnail {
    width: 45px;
    height: 45px;
    object-fit: cover; /* Stellt sicher, dass das Bild den Bereich füllt, ohne sich zu verzerren */
    border-radius: var(--bs-border-radius-sm);
    border: 1px solid var(--bs-border-color);
}

/* --- NEU: Vorschau-Styling für Dateivorschau in der Kartenansicht --- */
.card-view-preview {
    max-width: 100%;
    height: auto;
    max-height: 180px; /* Höhe der Vorschau begrenzen */
    object-fit: cover;
    border-radius: var(--bs-border-radius);
}



/* --- KORREKTUR: Styling für CMS-Inhalte --- */
/* Sorgt für eine ansprechende Formatierung von Inhalten, die aus dem CMS geladen werden,
   ohne andere .card-body-Elemente zu beeinflussen. */
.cms-content-wrapper {
    line-height: 1.6; /* Verbessert die Lesbarkeit von Fließtext. */
}
.cms-content-wrapper > *:not(:last-child) {
    margin-bottom: 1.25rem;
}
.cms-content-wrapper h2 {
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--bs-heading-color);
}
.cms-content-wrapper ul,
.cms-content-wrapper ol {
    padding-left: 2rem;
}
.cms-content-wrapper ul li,
.cms-content-wrapper ol li {
    margin-bottom: 0.5rem;
}


/* --- NEU: Trennlinie für die Checkbox-Spalte in der Stapelverarbeitung --- */
.checkbox-column {
    border-right: 4px double var(--akzentfarbe) !important; /* Wichtig, um Bootstrap-Ränder zu überschreiben */
    /* Ein kleiner zusätzlicher Abstand zum Inhalt der nächsten Zelle */
    padding-right: 1.5rem !important;
}



/* --- Custom Feature Colors (Website) --- */
.bg-purple { background-color: #6f42c1 !important; }
.text-purple { color: #6f42c1 !important; }
.bg-purple-subtle { background-color: #e0cffc !important; }
.btn-purple {
    --bs-btn-color: #fff;
    --bs-btn-bg: #6f42c1;
    --bs-btn-border-color: #6f42c1;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #59359a;
    --bs-btn-hover-border-color: #59359a;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #59359a;
    --bs-btn-active-border-color: #59359a;
}

.bg-navy { background-color: #0d2346 !important; }
.text-navy { color: #0d2346 !important; }
.btn-navy {
    --bs-btn-color: #fff;
    --bs-btn-bg: #0d2346;
    --bs-btn-border-color: #0d2346;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #0a1b36;
    --bs-btn-hover-border-color: #0a1b36;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #0a1b36;
    --bs-btn-active-border-color: #0a1b36;
}

/* --- Website Specific --- */
.card-title a:hover {
    color: var(--akzentfarbe) !important;
}

/* Enforce fixed width for FontAwesome icons to ensure alignment in lists and menus */
.fa-solid, .fas, .fa-regular, .far, .fa-brands, .fab, .fa-2x, .fa-3x, .fa-4x, .fa-5x, .fa-6x, .fa-7x, .fa-8x, .fa-9x, .fa-10x {
    width: 1.25em;
    text-align: center;
}

/* Schönerer Scrollbalken für Webkit-Browser (Chrome, Safari, Edge) */
.sidebar-submenu::-webkit-scrollbar {
    width: 6px;
}
.sidebar-submenu::-webkit-scrollbar-track {
    background: transparent;
}
.sidebar-submenu::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}

/* --- Optimierung für a) Tablet-Ansichten --- */
/* Auf Tablets (bis 1200px) den Content-Padding reduzieren */
@media (max-width: 1199.98px) {
    .container-fluid {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* --- Hide username on screens smaller than Full HD --- */
@media (max-width: 1919.98px) {
    /* Hide username in header to save space */
    #userMenuDropdown span {
        display: none;
    }
}

/* --- Impersonation Farbe --- */
.alert-warning {
    --bs-alert-bg: #ffde76 !important;
    --bs-alert-color: #664d03;
}

[data-bs-theme="dark"] .alert-warning {
    --bs-alert-bg: rgba(255, 222, 118, 0.15) !important;
    --bs-alert-color: #ffde76 !important;
    --bs-alert-border-color: rgba(255, 222, 118, 0.3) !important;
}

/* --- Quick Filter Buttons (admin_userlist.php) --- */
.btn-quick-filter {
    background-color: var(--akzenthintergrund);
    color: var(--bs-body-color);
    border-color: var(--akzenthintergrund);
}

[data-bs-theme="dark"] .btn-quick-filter {
    background-color: rgba(var(--bs-primary-rgb), 0.15);
    color: var(--bs-body-color);
    border-color: rgba(var(--bs-primary-rgb), 0.15);
}

/* Verhindert FOUC (Flash of Unstyled Content) bei Web Components */
intex-select:not(:defined) {
    display: none;
}

/* --- NEU: Pin-Button in Listen --- */
.list-group-item .pin-toggle-btn {
    opacity: 0.3;
    transition: opacity 0.2s ease-in-out, color 0.2s ease-in-out;
    color: var(--bs-secondary-color);
    position: relative;
    z-index: 2; /* Liegt über dem stretched-link der Zeile */
}

.list-group-item:hover .pin-toggle-btn {
    opacity: 1;
}

.pin-toggle-btn:hover {
    color: var(--akzentfarbe) !important;
}

/* --- NEU: Höherer z-index für Datepicker-Tooltips --- */
/* Stellt sicher, dass Tooltips über dem Kalender-Popup (z-index 1100) liegen */
.intex-datepicker-tooltip {
    z-index: 1150 !important;
}

/* --- NEU: Feste Zeichenbreite für Druckansichten --- */
.table-monospace {
    font-family: 'Consolas', 'Menlo', 'Courier New', monospace;
}

/* --- UI Usability: Desktop-like behavior for static elements --- */
/* Verhindert Text-Cursor und Markierung für Beschriftungen und Header */
.form-label,
.card-header,
.form-text,
.breadcrumb-item.active,
h1,
h2,
h3,
h4,
p.card-text {
    cursor: default;
    user-select: none;
    -webkit-user-select: none;
}

/* --- Quick-Add Icon Switch Logik für die Startseite --- */
.quick-add-icon-wrapper {
    position: relative;
    z-index: 2; /* Liegt über dem stretched-link der Zeile */
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.quick-add-icon-wrapper .main-icon {
    transition: opacity 0.2s ease, transform 0.2s ease;
    opacity: 1;
}

.quick-add-icon-wrapper .plus-link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.4);
    transition: opacity 0.2s ease, transform 0.2s ease;
    color: var(--akzentfarbe);
    z-index: 2;
    text-decoration: none;
}

.list-group-item:hover .quick-add-icon-wrapper.enabled .main-icon {
    opacity: 0;
    transform: scale(0.6);
}

.list-group-item:hover .quick-add-icon-wrapper.enabled .plus-link {
    opacity: 1;
    transform: scale(1.1);
}

.quick-add-icon-wrapper .plus-link:hover {
    transform: scale(1.3) !important;
    color: var(--akzentfarbedunkel);
}

/* Stellt sicher, dass der Mauszeiger innerhalb klickbarer Elemente ein Pointer bleibt */
[role="button"] *, .card-hover-effect * {
    cursor: inherit;
}