.profile-foreground{margin:18px 0 0;border-radius:22px;overflow:hidden;background:linear-gradient(125deg,var(--nexus-abyss,#13113A) 0%,var(--nexus-violet,#4338CA) 58%,var(--nexus-accent,#22D3EE) 100%)!important;box-shadow:0 16px 38px rgba(30,27,75,.18)}
.profile-foreground .profile-wid-bg{height:120px;border-radius:0;overflow:hidden;background:linear-gradient(125deg,var(--nexus-abyss,#13113A) 0%,var(--nexus-violet,#4338CA) 58%,var(--nexus-accent,#22D3EE) 100%)!important}
.profile-foreground .profile-wid-bg:before{background:linear-gradient(125deg,rgba(19,17,58,.94),rgba(67,56,202,.82),rgba(34,211,238,.72))!important;opacity:1!important;z-index:1}
.profile-foreground .profile-wid-bg .profile-wid-img{z-index:0}
.profile-foreground .profile-wid-bg .profile-wid-img{height:100%;object-fit:cover}
.profile-foreground + .pt-4{position:relative;margin:0 0 20px!important;padding:20px 38px 16px!important;min-height:0;border-radius:0 0 22px 22px;background:linear-gradient(125deg,var(--nexus-abyss,#13113A) 0%,var(--nexus-violet,#4338CA) 58%,var(--nexus-accent,#22D3EE) 100%)!important;color:#fff;z-index:2}
.profile-foreground + .pt-4 h1,.profile-foreground + .pt-4 h2,.profile-foreground + .pt-4 h3,.profile-foreground + .pt-4 h4,.profile-foreground + .pt-4 h5,.profile-foreground + .pt-4 p{color:#fff}
.profile-foreground + .pt-4 .profile-nav{margin-top:18px}
.profile-foreground + .pt-4 + .row{margin-top:0;padding:0 18px}
.profile-foreground + .pt-4 + .row .profile-nav{background:#fff;border:1px solid var(--nexus-line,#E5E7EB);border-radius:14px;box-shadow:0 8px 22px rgba(30,27,75,.08);padding:6px;gap:6px}
.profile-foreground + .pt-4 + .row .profile-nav .nav-link{background:transparent;border:0;border-radius:9px;color:#64748B;font-weight:700;padding:.65rem 1rem}
.profile-foreground + .pt-4 + .row .profile-nav .nav-link:hover,.profile-foreground + .pt-4 + .row .profile-nav .nav-link.active{background:var(--nexus-tint,#DDD6FE);color:var(--nexus-primary,#6366F1)}
.profile-nav{background:#fff!important;border:1px solid var(--nexus-line,#E5E7EB)!important;border-radius:14px!important;box-shadow:0 8px 22px rgba(30,27,75,.08)!important;padding:6px!important;gap:6px!important}
.profile-nav .nav-link{background:transparent!important;border:0!important;border-radius:9px!important;color:#64748B!important;font-weight:700!important;padding:.65rem 1rem!important;opacity:1!important}
.profile-nav .nav-link:hover,.profile-nav .nav-link.active{background:var(--nexus-tint,#DDD6FE)!important;color:var(--nexus-primary,#6366F1)!important}
.profile-foreground + .pt-4 + .row .tab-content{padding-top:1rem!important}
.profile-foreground .avatar-lg{height:84px;width:84px}
.profile-foreground .avatar-lg img{height:84px;width:84px;object-fit:cover}
.profile-foreground .profile-nav{flex-wrap:wrap}
.profile-foreground .profile-nav .nav-link{transition:transform .2s ease,background .2s ease}
.profile-foreground .profile-nav .nav-link:hover{transform:translateY(-1px)}
.profile-foreground .card{border:1px solid var(--nexus-line,#E5E7EB);border-radius:14px;box-shadow:0 8px 24px rgba(30,27,75,.08)}
/* Consistent header statistic tiles for every profile that uses the standard two-column stats block.
   Always laid out in a single row (never wraps to a stack), sized to fit compactly next to the name. */
.profile-foreground + .pt-4 > .row > .col-12.col-lg-auto > .row{display:flex;flex-wrap:nowrap!important;justify-content:flex-end;gap:10px;margin:0}
.profile-foreground + .pt-4 > .row > .col-12.col-lg-auto > .row > [class*="col-"]{flex:0 0 auto;width:auto;max-width:none;padding:0}
/*  A recessed dark chip, not a brand-orange one. These pills sit on the flame end of the
    banner, so filling them with the brand orange puts orange on orange and the pill
    disappears into the background - which is exactly what it did. The old blue worked
    only because the banner behind it was blue-navy. */
.profile-foreground + .pt-4 > .row > .col-12.col-lg-auto > .row > [class*="col-"] > .p-2{height:100%;min-height:56px;padding:8px 16px!important;border:1px solid rgba(255,255,255,.3);border-radius:14px;background:linear-gradient(135deg,rgba(19,17,58,.42),rgba(19,17,58,.22));color:#fff;box-shadow:0 8px 18px rgba(30,27,75,.18);backdrop-filter:blur(8px);display:flex;flex-direction:column;align-items:center;justify-content:center;transition:transform .2s ease,box-shadow .2s ease}
.profile-foreground + .pt-4 > .row > .col-12.col-lg-auto > .row > [class*="col-"]:nth-child(2) > .p-2{background:linear-gradient(135deg,rgba(13,148,103,.92),rgba(39,190,143,.78))}
.profile-foreground + .pt-4 > .row > .col-12.col-lg-auto > .row > [class*="col-"]:nth-child(3) > .p-2{background:linear-gradient(135deg,rgba(218,101,46,.92),rgba(244,151,67,.82))}
.profile-foreground + .pt-4 > .row > .col-12.col-lg-auto > .row > [class*="col-"] > .p-2:hover{transform:translateY(-2px);box-shadow:0 12px 22px rgba(30,27,75,.26)}
.profile-foreground + .pt-4 > .row > .col-12.col-lg-auto > .row > [class*="col-"] h4{font-size:18px;font-weight:800;color:#fff!important;margin-bottom:2px!important}
.profile-foreground + .pt-4 > .row > .col-12.col-lg-auto > .row > [class*="col-"] h5{font-size:11px;font-weight:700;color:#fff!important;margin-bottom:4px!important}
.profile-foreground + .pt-4 > .row > .col-12.col-lg-auto > .row > [class*="col-"] p{font-size:11px;font-weight:700;color:rgba(255,255,255,.92)!important;white-space:nowrap;margin-bottom:0!important}
.profile-foreground + .pt-4 > .row > .col-12.col-lg-auto > .row > [class*="col-"] i{font-size:20px!important;margin-top:2px}
@media(max-width:575.98px){.profile-foreground .profile-wid-bg{height:90px}.profile-foreground + .pt-4{margin-top:0!important;padding:16px 16px 12px!important}.profile-foreground + .pt-4 .row{row-gap:.5rem!important}.profile-foreground + .pt-4 > .row > .col-12.col-lg-auto > .row > [class*="col-"] > .p-2{padding:6px 10px!important;min-height:48px}}

/* ==========================================================================
   Learner-trace format, applied to every profile page.
   Ported from the inline styles in Areas/Administration/Views/ConsumerTrace/
   Details.cshtml so all profiles share one look instead of each view carrying
   its own copy.

   Deliberately CSS-only: no profile view's markup changes, so the existing
   .profile-nav tab strips keep working exactly as they do today. Nothing here
   targets .profile-nav or .nav-link - tab styling stays owned by the rules
   above this block.
   ========================================================================== */
:root{
    --trace-ink:var(--nexus-ink,#0F172A);
    --trace-muted:#64748B;
    --trace-line:var(--nexus-line,#E5E7EB);
    --trace-accent:var(--nexus-primary,#6366F1);
}

/* Page ground: the trace page sits on a tinted background rather than white. */
.profile-foreground ~ .row .tab-content,
.profile-foreground + .pt-4 + .row .tab-content{background:transparent}

/* Content cards inside profile tab panes take the trace card treatment. */
.tab-content > .tab-pane .card{
    background:#fff;
    border:1px solid var(--trace-line);
    border-radius:14px;
    box-shadow:0 7px 22px rgba(24,50,77,.06);
    overflow:hidden;
}
.tab-content > .tab-pane .card > .card-header{
    align-items:center;
    background:#fbfdff;
    border-bottom:1px solid var(--trace-line);
    color:var(--trace-ink);
    display:flex;
    justify-content:space-between;
    padding:16px 20px;
}
.tab-content > .tab-pane .card > .card-header strong,
.tab-content > .tab-pane .card > .card-header h5{font-size:15px;margin:0}
.tab-content > .tab-pane .card > .card-header i{color:var(--trace-accent);margin-right:7px}
.tab-content > .tab-pane .card > .card-body{padding:22px}

/* Tables inside those cards match the trace table treatment. */
.tab-content > .tab-pane .card thead th{
    background:#f5f8fb;
    border:0;
    color:#64748B;
    font-size:11px;
    letter-spacing:.06em;
    text-transform:uppercase;
    white-space:nowrap;
}
.tab-content > .tab-pane .card tbody td{
    border-color:#edf2f6;
    color:var(--nexus-ink,#0F172A);
    vertical-align:middle;
}
.tab-content > .tab-pane .card tbody tr:hover{background:#f7fbfe}
.tab-content > .tab-pane .card table{margin-bottom:0}

/* Small uppercase field labels, as used across the trace detail panels. */
.tab-content > .tab-pane .card small.text-muted{
    color:var(--trace-muted)!important;
    font-weight:700;
}

/* Stat tiles: any profile page can opt in by adding .trace-stat to a card. */
.trace-stat{
    background:#fff;
    border:1px solid var(--trace-line);
    border-radius:14px;
    box-shadow:0 7px 22px rgba(24,50,77,.06);
}
.trace-stat .card-body{padding:18px}
.trace-stat small{
    color:var(--trace-muted);
    font-size:11px;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
}
.trace-stat h5,.trace-stat h6{color:var(--trace-ink);margin-top:8px}
.trace-badge{
    background:#e7f7d5;
    border-radius:30px;
    color:#4d7d12;
    display:inline-block;
    font-size:13px;
    padding:6px 12px;
}
.trace-badge.failed{background:#fee2e2;color:#b42318}

@media(max-width:700px){
    .tab-content > .tab-pane .card > .card-body{padding:12px}
    .tab-content > .tab-pane .card > .card-header{padding:13px 14px}
}