/*
 * Trailing Paper — Dashboard welcome hero
 * Lifted from inline <style> in app/Views/index.php.
 *
 * Tokens come from tp-design-tokens.css (must load FIRST).
 *
 * Frontend gauntlet audit §1.4.
 */

.tp-welcome-hero {
    position: relative;
    background: linear-gradient(
        135deg,
        var(--tp-surface-1) 0%,
        var(--tp-surface-2) 50%,
        color-mix(in srgb, var(--tp-accent-500) 8%, var(--tp-surface-2)) 100%
    );
    border: 1px solid var(--tp-surface-divider);
    border-radius: 14px;
    padding: 22px 24px;
    color: var(--tp-text-primary);
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(15,23,42,0.04);
}
.tp-welcome-hero::before {
    content: '';
    position: absolute;
    right: -90px; top: -90px;
    width: 260px; height: 260px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,139,30,0.22) 0%, rgba(255,139,30,0) 70%);
    pointer-events: none;
}
.tp-welcome-hero::after {
    content: '';
    position: absolute;
    left: -50px; bottom: -70px;
    width: 180px; height: 180px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        color-mix(in srgb, var(--tp-accent-500) 18%, transparent) 0%,
        color-mix(in srgb, var(--tp-accent-500) 0%, transparent) 70%
    );
    pointer-events: none;
}

.tp-welcome-inner {
    position: relative;
    display: flex;
    align-items: center;
    gap: 18px;
}
.tp-welcome-logo {
    width: 64px; height: 64px;
    border-radius: 14px;
    background: var(--tp-surface-1);
    border: 1px solid var(--tp-surface-divider);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(15,23,42,0.04);
}
.tp-welcome-logo img { width: 72%; height: 72%; object-fit: contain; }
.tp-welcome-logo span {
    font-size: 22px;
    font-weight: 800;
    color: var(--tp-accent-500);
    letter-spacing: 0.02em;
}

.tp-welcome-text { flex: 1; min-width: 0; }
.tp-welcome-eyebrow {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--tp-text-secondary);
    margin-bottom: 4px;
}
.tp-welcome-name {
    color: var(--tp-text-primary);
    font-weight: 700;
    font-size: 22px;
    letter-spacing: -0.01em;
    margin: 0 0 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tp-welcome-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    font-size: 12.5px;
    color: var(--tp-text-secondary);
}
.tp-welcome-meta span,
.tp-welcome-meta .tp-welcome-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.tp-welcome-meta span i {
    font-size: 13px;
    color: var(--tp-text-muted);
}
.tp-welcome-chip {
    background: rgba(255,139,30,0.12);
    border: 1px solid rgba(255,139,30,0.3);
    color: #9a3412 !important;
    text-decoration: none !important;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: var(--tp-text-xs);
    font-weight: 600;
    transition: background .15s, transform .15s;
}
.tp-welcome-chip:hover {
    background: rgba(255,139,30,0.2);
    transform: translateY(-1px);
}
.tp-welcome-chip i {
    color: #9a3412;
    font-size: var(--tp-text-xs);
}

@media (max-width: 575.98px) {
    .tp-welcome-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }
    .tp-welcome-name {
        white-space: normal;
        font-size: 18px;
    }
}

/* ─────────────────────────────────────────────────────────────────
 * Dark theme — the welcome chip's deep-orange text (#9a3412) goes
 * unreadable on a translucent orange ground, so flip to a light orange
 * for AA contrast. The orange-tinted bg stays — it picks up the dark
 * surface beneath through alpha and reads as a warm chip.
 * ───────────────────────────────────────────────────────────────── */
[data-bs-theme="dark"] .tp-welcome-chip {
    background: rgba(255,139,30,0.18);
    border-color: rgba(255,139,30,0.4);
    color: #fdba74 !important;
}
[data-bs-theme="dark"] .tp-welcome-chip:hover {
    background: rgba(255,139,30,0.28);
}
[data-bs-theme="dark"] .tp-welcome-chip i {
    color: #fdba74;
}