/* E3 Branding & Animation Layer – nur Design, keine Logik
 * Theme-Farben (--e3-primary, --e3-accent, --tblr-primary) kommen aus dem Layout (DB/Preset).
 * Kontraste und Lesbarkeit haben Priorität.
 */

.page-header-e3 {
    border-radius: .75rem;
    padding: 1.75rem 2rem;
    margin-bottom: 1.5rem;
    background: #fff;
    border: 1px solid var(--tblr-border-color, #e9ecef);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.page-header-e3-title {
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: .03em;
    color: var(--tblr-body-color, #1f2937);
}

.page-header-e3-sub {
    font-size: .95rem;
    color: var(--tblr-secondary, #6b7280);
}

.e3-badge-pill {
    border-radius: 999px;
    padding: .25rem .75rem;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    background: var(--e3-primary);
    color: #fff;
}

/* Highlight-Karte: klarer Akzent, dunkle Schrift auf hellem Grund (gute Lesbarkeit) */
.e3-card-highlight {
    position: relative;
    border: 1px solid var(--tblr-border-color, #e9ecef);
    border-left: 4px solid var(--e3-primary);
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.e3-card-highlight > .card-body {
    position: relative;
    color: var(--tblr-body-color, #1f2937);
}

.e3-card-highlight .e3-metric-value {
    color: var(--e3-primary);
}

.e3-card-highlight .e3-card-icon {
    background: rgba(var(--tblr-primary-rgb, 6, 111, 209), 0.12);
    color: var(--e3-primary);
}

.e3-card-icon {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--tblr-bg-surface-secondary, #f3f4f6);
    color: var(--tblr-secondary, #6b7280);
}

/* Labels immer gut lesbar, kein opacity */
.e3-metric-label {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 600;
    color: var(--tblr-secondary, #6b7280);
}

.e3-metric-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--tblr-body-color, #1f2937);
}

/* Dashboard-Karten: klare Abgrenzung, professioneller Kontrast */
.e3-dashboard-cards .card {
    border: 1px solid var(--tblr-border-color, #e9ecef);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    background: #fff;
}

.e3-dashboard-cards .card-body {
    color: var(--tblr-body-color, #1f2937);
}

.e3-dashboard-cards .card-header {
    color: var(--tblr-body-color, #1f2937);
    font-weight: 600;
    border-bottom-color: var(--tblr-border-color, #e9ecef);
}

.e3-row-fade-in > [class*="col-"] {
    opacity: 0;
    transform: translateY(14px);
    animation: e3-fade-up .6s ease-out forwards;
}

.e3-row-fade-in > [class*="col-"]:nth-child(2) {
    animation-delay: .06s;
}

.e3-row-fade-in > [class*="col-"]:nth-child(3) {
    animation-delay: .12s;
}

.e3-row-fade-in > [class*="col-"]:nth-child(4) {
    animation-delay: .18s;
}

@keyframes e3-fade-up {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}