/* =============================================================================
   ASCEND shared design system — Ascend.UI Razor Class Library.
   Served to both Blazor hosts at _content/Ascend.UI/ascend-ui.css.

   Everything here is namespaced: design tokens use the --aui-* prefix and every
   class uses the aui- prefix, so this stylesheet coexists additively with each
   host's existing CSS (.ind-* in the PWA, staff classes in Ascend.Web) during
   the migration. No webfonts, no CDNs — inline SVG + CSS only.
   ========================================================================== */

:root {
    /* Brand spine — navy = trust/ground, green = growth/hope. */
    --aui-navy:        #1a3a5e;
    --aui-navy-700:    #2a4d75;
    --aui-navy-100:    #d6e0ee;
    --aui-navy-50:     #eaf0f7;
    --aui-green:       #16a34a;
    --aui-green-600:   #15803d;
    --aui-green-50:    #dcfce7;

    /* Achievement accents — gold / teal / blue for crests + highlights. */
    --aui-gold:        #f0a324;
    --aui-gold-600:    #cf8211;
    --aui-teal:        #0d9488;
    --aui-teal-600:    #0f766e;
    --aui-blue:        #2f6fed;
    --aui-blue-600:    #1d4fc0;

    /* Surfaces + ink. */
    --aui-bg-card:        #ffffff;
    --aui-text-primary:   #1d2433;
    --aui-text-secondary: #5a6478;
    --aui-text-muted:     #8993a4;
    --aui-border-subtle:  #e3e7ee;

    /* Gradients. */
    --aui-navy-gradient: linear-gradient(165deg, #234b78 0%, #1a3a5e 55%, #14304f 100%);
    --aui-aurora:        linear-gradient(135deg, #1a3a5e 0%, #2563eb 35%, #16a34a 70%, #f97316 100%);
    --aui-green-gradient: linear-gradient(90deg, var(--aui-green-600), var(--aui-green));

    /* Elevation + shape. */
    --aui-shadow-card:     0 1px 2px rgba(20, 35, 60, .06), 0 4px 16px rgba(20, 35, 60, .05);
    --aui-shadow-elevated: 0 6px 22px rgba(20, 35, 60, .14), 0 2px 6px rgba(20, 35, 60, .08);
    --aui-radius-card:     14px;
    --aui-radius-pill:     999px;

    /* Typography scale. */
    --aui-font:        'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --aui-fs-display:  1.6rem;
    --aui-fs-title:    1.15rem;
    --aui-fs-body:     .92rem;
    --aui-fs-meta:     .8rem;
    --aui-fs-micro:    .65rem;
}

/* ---------- generic surfaces ---------- */
.aui-card {
    background: var(--aui-bg-card);
    border-radius: var(--aui-radius-card);
    border: 1px solid var(--aui-border-subtle);
    box-shadow: var(--aui-shadow-card);
    padding: 1.5rem;
}
/* Subtle gradient top-accent that respects rounded corners (uses ::before so it
   never bleeds onto the side borders the way border-image does). */
.aui-accent-top { position: relative; overflow: hidden; }
.aui-accent-top::before {
    content: "";
    position: absolute; top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--aui-aurora);
}

/* =============================================================================
   BrandedPageHeader
   ========================================================================== */
.aui-page-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.aui-page-header-brand { display: inline-flex; align-items: center; line-height: 0; }
.aui-page-header-text { min-width: 0; }
.aui-page-header-title {
    font-family: var(--aui-font);
    font-size: var(--aui-fs-display);
    font-weight: 800;
    color: var(--aui-navy);
    margin: 0;
    letter-spacing: -.01em;
}
.aui-page-header-sub {
    color: var(--aui-text-secondary);
    font-size: var(--aui-fs-body);
    margin: .15rem 0 0;
}
.aui-page-header-spacer { flex: 1; }
.aui-page-header-aside { flex: none; }

/* =============================================================================
   VerifiedSeal
   ========================================================================== */
.aui-seal { display: inline-flex; align-items: center; gap: .65rem; }
.aui-seal-mark { width: 64px; height: 64px; flex: none; filter: drop-shadow(0 3px 6px rgba(20, 35, 60, .2)); }
.aui-seal-text { display: flex; flex-direction: column; line-height: 1.15; }
.aui-seal-lead { font-size: var(--aui-fs-micro); font-weight: 700; letter-spacing: .12em; color: var(--aui-text-secondary); }
.aui-seal-brand { font-size: 1rem; font-weight: 800; color: var(--aui-navy); letter-spacing: .02em; }
.aui-seal-sub { font-size: var(--aui-fs-micro); color: var(--aui-text-muted); margin-top: .15rem; }
.aui-seal-on-dark .aui-seal-lead { color: rgba(255, 255, 255, .82); }
.aui-seal-on-dark .aui-seal-brand { color: #fff; }
.aui-seal-on-dark .aui-seal-sub { color: rgba(255, 255, 255, .7); }

/* Award-ribbon variant: medallion seated on two folded banner tails. */
.aui-seal-ribbon .aui-seal-mark { width: 72px; height: 86px; filter: drop-shadow(0 5px 9px rgba(20, 35, 60, .22)); }
.aui-seal-band { fill: var(--aui-green-600); stroke: #fff; stroke-width: 1.5; stroke-linejoin: round; }
.aui-seal-band-right { fill: var(--aui-green); }

/* =============================================================================
   ProfileHero
   ========================================================================== */
.aui-hero { position: relative; padding: 1.6rem 1.75rem; }
.aui-hero-aside { position: absolute; top: 1.35rem; right: 1.5rem; }
.aui-hero-id { display: flex; align-items: center; gap: 1.35rem; }
.aui-hero-has-aside .aui-hero-id { padding-right: 200px; }

.aui-hero-avatar {
    width: 92px; height: 92px;
    flex: none;
    border-radius: 50%;
    object-fit: cover;
    display: grid; place-items: center;
    background: linear-gradient(150deg, var(--aui-navy-700), var(--aui-navy));
    color: #fff;
    font-size: 2rem; font-weight: 700;
    box-shadow: 0 4px 14px rgba(20, 35, 60, .25);
    border: 3px solid #fff;
}
.aui-hero-meta { flex: 1; min-width: 0; }
.aui-hero-name-row { display: flex; align-items: center; flex-wrap: wrap; gap: .65rem; }
.aui-hero-name { font-family: var(--aui-font); font-size: var(--aui-fs-display); font-weight: 800; margin: 0; color: var(--aui-text-primary); }

.aui-hero-contact { display: flex; flex-wrap: wrap; gap: .35rem 1.35rem; color: var(--aui-text-secondary); font-size: var(--aui-fs-body); margin-top: .5rem; }
.aui-hero-contact span { display: inline-flex; align-items: center; gap: .4rem; }
.aui-hero-contact svg { width: 16px; height: 16px; flex: none; color: var(--aui-green-600); }

.aui-hero-ready { margin-top: .9rem; max-width: 440px; }
.aui-hero-ready-label { font-size: var(--aui-fs-body); color: var(--aui-text-secondary); display: inline-block; margin-bottom: .35rem; }
.aui-hero-ready-label strong { color: var(--aui-green-600); font-size: 1rem; }

.aui-hero-crests {
    display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem;
    margin-top: 1.5rem; padding-top: 1.25rem;
    border-top: 1px solid var(--aui-border-subtle);
}

@media (max-width: 720px) {
    .aui-hero-has-aside .aui-hero-id { padding-right: 0; }
    .aui-hero-aside { position: static; margin-bottom: 1rem; display: block; }
    .aui-hero-id { flex-wrap: wrap; }
}

/* ---------- status pill + chips (shared) ---------- */
.aui-status {
    display: inline-flex; align-items: center; gap: .35rem;
    font-size: var(--aui-fs-meta); font-weight: 700;
    padding: .2rem .7rem; border-radius: var(--aui-radius-pill);
    text-transform: capitalize; letter-spacing: .01em;
    background: var(--aui-navy-50); color: var(--aui-navy);
}
.aui-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.aui-status-active { background: var(--aui-green-50); color: var(--aui-green-600); }
.aui-status-inactive { background: #f1f5f9; color: var(--aui-text-muted); }
.aui-status-warning { background: #fef3c7; color: #b45309; }

.aui-chip {
    display: inline-flex; align-items: center;
    font-size: var(--aui-fs-meta); font-weight: 600;
    padding: .18rem .6rem; border-radius: var(--aui-radius-pill);
    background: var(--aui-navy-50); color: var(--aui-navy);
}
.aui-chip-green { background: var(--aui-green-50); color: var(--aui-green-600); }
.aui-chip-gold { background: #fef3c7; color: var(--aui-gold-600); }

/* ---------- progress bar (shared) ---------- */
.aui-bar { height: 8px; border-radius: var(--aui-radius-pill); background: var(--aui-navy-50); overflow: hidden; }
.aui-bar-fill { height: 100%; border-radius: var(--aui-radius-pill); background: var(--aui-green-gradient); transition: width .6s ease-out; }

/* =============================================================================
   ProgressRing
   ========================================================================== */
.aui-ring-wrap { display: inline-block; line-height: 0; }
.aui-ring { transform: rotate(-90deg); display: block; }
.aui-ring-track { fill: none; stroke: var(--aui-navy-50); }
.aui-ring-fill { fill: none; stroke: var(--aui-green); stroke-linecap: round; transition: stroke-dasharray .6s ease-out; }
.aui-ring-num { transform: rotate(90deg); transform-origin: 60px 60px; font-size: 26px; font-weight: 800; fill: var(--aui-text-primary); font-family: var(--aui-font); }
.aui-ring-lbl { transform: rotate(90deg); transform-origin: 60px 60px; font-size: 11px; fill: var(--aui-text-muted); text-transform: uppercase; letter-spacing: .05em; font-family: var(--aui-font); }

/* =============================================================================
   StatCard / KpiCard
   ========================================================================== */
.aui-stat {
    background: var(--aui-bg-card);
    border: 1px solid var(--aui-border-subtle);
    border-radius: var(--aui-radius-card);
    box-shadow: var(--aui-shadow-card);
    padding: 1.25rem;
    display: flex; flex-direction: column; gap: .35rem;
}
.aui-stat-icon { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--aui-navy-50); color: var(--aui-navy); margin-bottom: .35rem; }
.aui-stat-icon svg { width: 22px; height: 22px; }
.aui-stat-value { font-family: var(--aui-font); font-size: 1.75rem; font-weight: 700; line-height: 1.1; color: var(--aui-text-primary); }
.aui-stat-label { font-size: var(--aui-fs-meta); color: var(--aui-text-secondary); }
.aui-stat-detail { font-size: var(--aui-fs-micro); color: var(--aui-text-muted); }
.aui-stat-green { background: linear-gradient(135deg, var(--aui-green-50), #fff); border-color: var(--aui-green-50); }
.aui-stat-green .aui-stat-icon { background: var(--aui-green-50); color: var(--aui-green-600); }
.aui-stat-navy { background: linear-gradient(135deg, var(--aui-navy), var(--aui-navy-700)); border-color: var(--aui-navy); }
.aui-stat-navy .aui-stat-value { color: #fff; }
.aui-stat-navy .aui-stat-label, .aui-stat-navy .aui-stat-detail { color: rgba(255, 255, 255, .78); }
.aui-stat-navy .aui-stat-icon { background: rgba(255, 255, 255, .14); color: #fff; }

/* Click-through stat tile: wrap a StatCard/KpiCard in <a class="aui-stat-link">
   to keep a dashboard KPI navigable while gaining a subtle hover lift. */
a.aui-stat-link { display: block; text-decoration: none; border-radius: var(--aui-radius-card); transition: transform .16s ease, box-shadow .16s ease; }
a.aui-stat-link:hover { transform: translateY(-2px); text-decoration: none; }
a.aui-stat-link:hover .aui-stat { box-shadow: var(--aui-shadow-elevated); }
a.aui-stat-link .aui-stat { height: 100%; }

/* =============================================================================
   AchievementCrest — shield + laurel medallion (promoted from the PWA .ind-crest)
   ========================================================================== */
.aui-crest {
    width: 116px;
    text-align: center;
    --aui-crest-base: #2a4d75;
    --aui-crest-dark: #1a3a5e;
}
.aui-crest-compact { width: auto; min-width: 92px; display: flex; align-items: center; gap: .5rem; text-align: left; }
.aui-crest-art { position: relative; width: 96px; margin: 0 auto .4rem; }
.aui-crest-compact .aui-crest-art { width: 46px; margin: 0; }
.aui-crest-svg {
    width: 100%; height: auto; display: block;
    filter: drop-shadow(0 3px 5px rgba(20, 35, 60, .22));
    transition: transform .18s cubic-bezier(.34, 1.56, .64, 1);
}
.aui-crest:hover .aui-crest-svg { transform: translateY(-3px) scale(1.03); }

.aui-crest-laurel .aui-crest-leaf { fill: #e7b765; }
.aui-crest-laurel .aui-crest-stem { fill: none; stroke: #c8912f; stroke-width: 2; stroke-linecap: round; }
.aui-crest-shield { fill: #213f68; stroke: #16304f; stroke-width: 2; }
.aui-crest-medallion { fill: var(--aui-crest-base); stroke: var(--aui-crest-dark); stroke-width: 2.5; }
.aui-crest-shine { fill: #fff; opacity: .22; }
.aui-crest-check { fill: none; stroke: #fff; stroke-width: 5.5; stroke-linecap: round; stroke-linejoin: round; }
.aui-crest-glyph { fill: #fff; }

.aui-crest-green  { --aui-crest-base: #22a559; --aui-crest-dark: #157f3f; }
.aui-crest-blue   { --aui-crest-base: #2f6fed; --aui-crest-dark: #1d4fc0; }
.aui-crest-gold   { --aui-crest-base: #f0a324; --aui-crest-dark: #cf8211; }
.aui-crest-teal   { --aui-crest-base: #0d9488; --aui-crest-dark: #0f766e; }
.aui-crest-navy   { --aui-crest-base: #2a4d75; --aui-crest-dark: #1a3a5e; }

.aui-crest-name { font-size: .9rem; font-weight: 800; color: var(--aui-text-primary); line-height: 1.15; }
.aui-crest-compact .aui-crest-name { font-size: .78rem; }
.aui-crest-date { font-size: var(--aui-fs-micro); color: var(--aui-text-muted); margin-top: .15rem; text-transform: uppercase; letter-spacing: .04em; }
.aui-crest-locked .aui-crest-svg { filter: grayscale(1) opacity(.55); }
.aui-crest-locked .aui-crest-name { color: var(--aui-text-muted); }

/* "+N more" pill variant. */
.aui-crest-more {
    display: inline-flex; align-items: center;
    font-size: var(--aui-fs-body); font-weight: 700; color: var(--aui-navy);
    padding: .4rem .85rem; border: 1px solid var(--aui-border-subtle);
    border-radius: var(--aui-radius-pill); background: var(--aui-bg-card);
}

@media (max-width: 600px) {
    .aui-crest { width: 96px; }
}

/* =============================================================================
   POC scope — staff "person detail" page only.
   Overrides the global .section-card aurora border-image (which, with slice 1,
   wraps ALL four edges and reads as a debug outline) with a clean card + a
   subtle single-colour top accent. Scoped under .aui-people-detail so it only
   touches the POC page; .section-card does not exist in the PWA at all.
   ========================================================================== */
.aui-people-detail .section-card {
    border: 1px solid var(--aui-border-subtle);
    border-top: 3px solid var(--aui-green);
    border-image: none;
    border-radius: var(--aui-radius-card);
    box-shadow: var(--aui-shadow-card);
}
.aui-people-detail .section-card:hover { box-shadow: var(--aui-shadow-elevated); }

/* =============================================================================
   Shared utilities: muted text, buttons, list rows + chevrons.
   ========================================================================== */
.aui-muted { color: var(--aui-text-muted); }

.aui-btn {
    display: inline-block;
    padding: .65rem 1.1rem;
    background: var(--aui-bg-card);
    color: var(--aui-navy);
    border: 1px solid var(--aui-border-subtle);
    border-radius: 8px;
    font-size: .9rem; font-weight: 700; letter-spacing: .02em;
    cursor: pointer; text-decoration: none;
    transition: filter .15s, background-color .15s;
}
.aui-btn:hover { filter: brightness(1.02); text-decoration: none; }
.aui-btn-primary { background: var(--aui-navy); color: #fff; border-color: var(--aui-navy); }
.aui-btn-primary:hover { background: var(--aui-navy-700); color: #fff; }

.aui-row-chevron { width: 18px; height: 18px; flex: none; color: var(--aui-text-muted); }

/* =============================================================================
   ModuleListCard — titled card + completed-count + progress + module rows.
   ========================================================================== */
.aui-list-card { padding: 1.5rem 1.6rem; }
.aui-list-card-head { padding-bottom: .7rem; margin-bottom: 1rem; border-bottom: 1px solid var(--aui-border-subtle); }
.aui-list-card-title { font-family: var(--aui-font); font-size: var(--aui-fs-title); font-weight: 800; color: var(--aui-navy); margin: 0; }

.aui-module-count { display: flex; align-items: center; gap: .4rem; color: var(--aui-text-secondary); margin-bottom: .65rem; }
.aui-module-count strong { color: var(--aui-text-primary); }
.aui-module-count-tick { width: 22px; height: 22px; flex: none; color: var(--aui-green-600); display: grid; place-items: center; }
.aui-module-count-tick svg { width: 20px; height: 20px; }
.aui-module-bar { margin-bottom: 1.1rem; }

.aui-module-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.aui-module-row { display: flex; align-items: center; gap: .85rem; padding: .85rem 0; border-top: 1px solid var(--aui-border-subtle); }
.aui-module-row:first-child { border-top: none; }
.aui-module-check { width: 26px; height: 26px; flex: none; color: var(--aui-green-600); display: grid; place-items: center; }
.aui-module-check svg { width: 22px; height: 22px; }
.aui-module-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.aui-module-title { font-weight: 700; color: var(--aui-text-primary); }
.aui-module-detail { font-size: var(--aui-fs-meta); color: var(--aui-text-muted); margin-top: .1rem; }

.aui-list-card-action { display: block; text-align: center; margin-top: 1.1rem; }

/* =============================================================================
   CertificateCard — green-tinted credential tile.
   ========================================================================== */
.aui-cert {
    display: flex; align-items: center; gap: .8rem;
    padding: .85rem 1rem;
    background: linear-gradient(135deg, var(--aui-green-50), #fff);
    border: 1px solid var(--aui-border-subtle);
    border-radius: 10px;
    color: var(--aui-text-primary); text-decoration: none;
    transition: border-color .12s, box-shadow .12s;
}
a.aui-cert:hover { border-color: var(--aui-green); box-shadow: 0 4px 12px rgba(22, 163, 74, .12); text-decoration: none; color: var(--aui-text-primary); }
.aui-cert-check { width: 26px; height: 26px; flex: none; color: var(--aui-green-600); display: grid; place-items: center; }
.aui-cert-check svg { width: 22px; height: 22px; }
.aui-cert-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.aui-cert-title { font-weight: 700; color: var(--aui-text-primary); }
.aui-cert-date { font-size: var(--aui-fs-meta); color: var(--aui-text-muted); margin-top: .1rem; }
.aui-cert-list { display: flex; flex-direction: column; gap: .65rem; }

/* =============================================================================
   ResourceConnectionRow — tinted badge + name/sub + chevron.
   ========================================================================== */
.aui-conn-list { list-style: none; padding: 0; margin: 0; }
.aui-conn-list li + li { border-top: 1px solid var(--aui-border-subtle); }
.aui-conn-row { display: flex; align-items: center; gap: .75rem; padding: .7rem .15rem; color: var(--aui-text-primary); text-decoration: none; transition: color .12s; }
a.aui-conn-row:hover { color: var(--aui-green-600); text-decoration: none; }
.aui-conn-badge { width: 34px; height: 34px; flex: none; border-radius: 50%; display: grid; place-items: center; }
.aui-conn-badge svg { width: 18px; height: 18px; }
.aui-conn-badge-green { background: var(--aui-green-50); color: var(--aui-green-600); }
.aui-conn-badge-navy  { background: var(--aui-navy-50); color: var(--aui-navy); }
.aui-conn-badge-blue  { background: #e0ecff; color: var(--aui-blue-600); }
.aui-conn-badge-amber { background: #fef3c7; color: var(--aui-gold-600); }
.aui-conn-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.aui-conn-name { font-weight: 700; color: var(--aui-text-primary); font-size: .92rem; }
.aui-conn-sub { font-size: var(--aui-fs-meta); color: var(--aui-text-muted); }

/* =============================================================================
   Portfolio page layout: two-column grid + verified-seal compact aside,
   a "coming soon" disabled action, and a centred help footer.
   ========================================================================== */
.aui-portfolio-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 1.25rem; align-items: start; }
.aui-portfolio-side { display: flex; flex-direction: column; gap: 1.25rem; }
.aui-portfolio-help { margin-top: 1.25rem; text-align: center; color: var(--aui-text-secondary); font-size: var(--aui-fs-body); }
.aui-portfolio-help a { color: var(--aui-navy); font-weight: 700; }

/* Portfolio profile card: a rounded-rectangle photo (matching the client
   mockup) and extra right padding so the ribbon seal aside clears the meta. */
.aui-portfolio-profile .aui-hero-avatar {
    width: 104px; height: 104px;
    border-radius: 20px;
    font-size: 2.1rem;
}
.aui-portfolio-profile .aui-hero-has-aside .aui-hero-id { padding-right: 220px; }

/* Photo upload control, restyled to sit quietly under the profile divider. */
.aui-photo-upload {
    display: flex; align-items: center; gap: .85rem;
    margin-top: 1.25rem; padding-top: 1.1rem;
    border-top: 1px solid var(--aui-border-subtle);
}
.aui-photo-upload .aui-btn { display: inline-flex; align-items: center; gap: .45rem; font-size: var(--aui-fs-meta); padding: .5rem .9rem; }
.aui-photo-upload .aui-btn svg { color: var(--aui-green-600); }
.aui-btn-ghost { background: var(--aui-navy-50); border-color: transparent; color: var(--aui-navy); }
.aui-btn-ghost:hover { background: var(--aui-navy-100); }
.aui-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.aui-error { color: #b91c1c; font-size: var(--aui-fs-meta); }

/* Download PDF + help line footer (mockup places the action bottom-right). */
.aui-portfolio-footer {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: .75rem;
    margin-top: 1.25rem;
}
.aui-portfolio-footer .aui-portfolio-help { margin-top: 0; text-align: left; }
.aui-btn-download {
    display: inline-flex; align-items: center; gap: .45rem;
    background: var(--aui-green-gradient); color: #fff; border-color: transparent;
    box-shadow: 0 4px 12px rgba(22, 163, 74, .25);
}
.aui-btn-download:hover { color: #fff; filter: brightness(1.04); }

@media (max-width: 720px) {
    .aui-portfolio-profile .aui-hero-has-aside .aui-hero-id { padding-right: 0; }
    .aui-portfolio-footer { justify-content: center; }
    .aui-portfolio-footer .aui-portfolio-help { text-align: center; }
}

.aui-seal-aside { display: flex; flex-direction: column; align-items: flex-end; gap: .35rem; }
.aui-btn-disabled {
    opacity: .55; cursor: not-allowed; pointer-events: none;
    display: inline-flex; align-items: center; gap: .4rem;
    font-size: var(--aui-fs-meta);
}

@media (max-width: 900px) {
    .aui-portfolio-grid { grid-template-columns: 1fr; }
}