/*see https://blog.getbootstrap.com/2022/05/16/using-bootstrap-css-vars/*/
:root {
}

.impersonated {
    background-color: var(--bs-info-bg-subtle);
}

.debug-info {
    position: fixed;
    z-index: 100;
    background-color: var(--bs-warning);
    opacity: 0.6;
}

nav .nav-item:hover {
    outline: 1px solid var(--bs-info);
    border-radius: 5px;
}

nav .nav-item {
    margin-right: 10px;
}

label.required:after, legend.required:after {
    content: '*';
    color: var(--bs-danger);
    margin-left: 3px;
}

input[readonly] {
    background-color: var(--bs-secondary-bg-subtle) !important;
}

.modal-body .btn-close {
    position: absolute;
    right: 1em;
}

.bd-callout {
    padding: 1.25rem;
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
    border: 1px solid #eee;
    border-left-width: .25rem;
    border-radius: .25rem
}

.bd-callout h4 {
    margin-top: 0;
    margin-bottom: .25rem
}

.bd-callout p:last-child {
    margin-bottom: 0
}

.bd-callout code {
    border-radius: .25rem
}

.bd-callout + .bd-callout {
    margin-top: -.25rem
}

.bd-callout-info {
    border-left-color: #5bc0de
}

.bd-callout-info h4 {
    color: #5bc0de
}

.bd-callout-warning {
    border-left-color: var(--bs-warning)
}

.bd-callout-warning h4 {
    color: var(--bs-warning)
}

.bd-callout-danger {
    border-left-color: var(--bs-danger)
}

.bd-callout-danger h4 {
    color: var(--bs-danger)
}

.bd-callout-primary {
    border-left-color: var(--bs-primary);
}

.bd-callout-primary h4 {
    color: var(--bs-primary);
}

.bd-callout-success {
    border-left-color: var(--bs-success)
}

.bd-callout-success h4 {
    color: var(--bs-success)
}

.highlightedItem, .list-group-item.highlightedItem {
    background-color: var(--bs-success-bg-subtle);
}

.warnItem, .list-group-item.warnItem {
    background-color: var(--bs-warning-bg-subtle);
}

.pointer {
    cursor: pointer;
}


@media (max-width: 767.98px) {
    /* Den echten Tabellen-Header auf Mobile verstecken */
    .responsive-card-table thead {
        display: none;
    }

    /* Jede Zeile (tr) wird zu einer Kachel */
    .responsive-card-table tr {
        display: block;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        border: 1px solid var(--bs-gray-300);
        border-radius: 0.375rem; /* Bootstrap-Standard-Radius */
        padding: 1rem;
        margin-bottom: 1rem;
    }

    /* Jede Zelle (td) wird untereinander dargestellt */
    .responsive-card-table td {
        display: flex;
        justify-content: space-between;
        text-align: right;
        border-bottom: 1px solid var(--bs-gray-300);
    }

    /* Letzte Zelle braucht keinen unteren Rand in der Kachel */
    .responsive-card-table td:last-child {
        border-bottom: 0;
    }

    /* Der Header rutscht nach links via data-label */
    .responsive-card-table td::before {
        content: attr(data-label);
        text-align: left;
    }
}