/**
 * Stylesheet für das Bildnachweis Plugin.
 * Optimiert auf kompaktes Padding, symmetrische Spalten und deaktiviertes Uppercase.
 */

.bn-table-wrapper {
    width: 100%;
    margin: 2rem 0;
    font-family: inherit;
}

.bn-flex-table {
    display: flex;
    flex-direction: column;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
    background: transparent;
}

/* Header-Bereich: Dynamische Farben, kein Uppercase */
.bn-header-row {
    display: flex;
    background-color: var(--bn-color-header-bg);
    color: var(--bn-color-header-text);
    font-weight: bold;
    border-bottom: 2px solid var(--bn-color-marker);
    font-size: 0.95rem;
}

.bn-row {
    display: flex;
    border-bottom: 1px solid #eee;
    background: transparent;
    transition: background 0.1s ease;
}

.bn-row:last-child {
    border-bottom: none;
}

.bn-row:hover {
    background: rgba(0, 0, 0, 0.015);
}

/* Zellen: Globales Padding auf 10px reduziert */
.bn-cell {
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
}

/* Bildspalte: Passend für 150px Bild + Padding */
.bn-col-img {
    width: 170px;
    flex-shrink: 0;
    align-items: center;
}

.bn-col-img-header {
    align-items: start;
}

/* Info- und Urheber-Spalten teilen sich den Rest 50/50 */
.bn-col-info,
.bn-col-source {
    flex: 1 1 0;
    min-width: 0;
}

.bn-col-info {
    border-left: none; /* 1px solid #eee;    */
    border-right: none; /* 1px solid #eee;  */
}

/* Bild-Anzeige: Medium Qualität, Vollansicht (Contain) */
.bn-img {
    width: 150px;
    height: 150px;
    object-fit: contain;
    background: transparent;
    display: block;
}

/* Verwendungs-Liste & Symbole */
.bn-usage-list {
    line-height: 1.7;
}

.bn-usage-link {
    text-decoration: none;
    color: inherit;
    display: inline-flex;
    align-items: baseline;
}

.bn-usage-link:hover {
    color: var(--bn-color-symbol);
    text-decoration: underline;
}

.bn-system-tag {
    display: inline-flex;
    align-items: center;
    color: #444;
    font-weight: 600;
}

/* Pfeil-Icon 16x16 */
.bn-svg-arrow {
    width: 16px;
    height: 16px;
    margin-right: 8px;
    color: var(--bn-color-symbol);
    flex-shrink: 0;
}

.bn-lizenz-icon {
    color: var(--bn-color-symbol);
}

/* TULL Design */
.bn-tull-title {
    font-size: 1.05em;
    color: #111;
}

.bn-tull-details {
    /*font-size: 1rem;*/
    color: #555;
}

/* Lizenz-Badge (wird nur bei Inhalt eingeblendet) */
.bn-license-badge {
    display: inline-block;
    margin-top: 8px;
    padding: 3px 15px;
    font-size: 0.8rem;
    font-weight: bold;
    background-color: var(--bn-color-license-bg);
    color: var(--bn-color-license-text);
    border-radius: 8px;
}

.bn-license-badge-link {
    color: var(--bn-color-license-text) !important;
}

/* Responsive Ansicht */
@media (max-width: 850px) {
    .bn-header-row {
        display: none;
    }

    .bn-row {
        flex-direction: column;
        border-bottom: 2px solid var(--bn-color-marker);
    }

    .bn-cell {
        width: 100% !important;
        border: none !important;
        padding: 10px 20px;
    }

    .bn-img {
        max-width: 200px;
        height: auto;
        margin: 0 auto;
    }

    .bn-cell::before {
        content: attr(data-label);
        display: block;
        font-size: 0.7rem;
        font-weight: bold;
        color: var(--bn-color-marker);
        margin-bottom: 4px;
    }
}

.bn-date {
    font-size: 0.8rem;
    color: #888;
    display: inline-block;
    margin-top: 4px;
}

/* Positionierung in der Urheber-Zelle */
.bn-col-source {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Schiebt TULL nach oben und Timestamp nach unten */
}

.bn-tull {
    flex-grow: 0;
    /*margin-bottom: 10px;*/
}

/* Zeitstempel als Fußnote */
.bn-timestamp {
    font-size: 0.7rem;
    color: #999;
    text-align: right;
    display: block;
    font-style: italic;
    /*border-top: 1px solid rgba(0, 0, 0, 0.05);*/
    /*padding-top: 5px;*/
    /*margin-top: auto; !* Erzwingt die Position am Boden der Zelle *!*/
}

/* Mobile Korrektur für das Datum */
@media (max-width: 850px) {
    .bn-timestamp {
        text-align: left;
        border-top: none;
        padding-top: 0;
        margin-top: 5px;
    }
}