/* BGC portal overrides — client_specific.mdc (Look & Feel + Component Styling) */

:root {
    /* Primary */
    --bgc-navy: #065478;
    --bgc-azure: #2885C7;
    /* Secondary */
    --bgc-charcoal: #414042;
    --bgc-sky: #41AEDE;
    --bgc-smoke: #E6E7E8;
    --bgc-jade: #27B78A;
    /* Semantic */
    --primary-color: var(--bgc-navy);
    --secondary-color: var(--bgc-azure);
    --accent-color: var(--bgc-jade);
    --info-color: var(--bgc-sky);
    --neutral-color: var(--bgc-smoke);
    --text-color: var(--bgc-charcoal);
}

/* White-grounded content; charcoal body copy */
.content,
.card-body {
    color: var(--text-color);
}

.content a:not(.btn),
.card-body a:not(.btn) {
    color: var(--bgc-azure);
    text-decoration-color: var(--bgc-azure);
}

.content a:not(.btn):hover,
.card-body a:not(.btn):hover {
    color: var(--bgc-navy);
}

/* Primary headings — navy */
.content h1,
.content h2,
.card-body h1,
.card-body h2,
.card-body h3 {
    color: var(--primary-color);
}

/* Secondary headings / labels — azure */
.content h4,
.content h5,
.content h6,
.card-body h4,
.card-body h5,
.card-body h6 {
    color: var(--secondary-color);
}

/* Portal cards — navy accent + azure header (profile, dashboard, etc.) */
.border-left-blue {
    /* Match the credential-card shell exactly so the azure header sits flush
       against the navy accent bar: uniform 1px smoke border + 4px navy left,
       a single radius, and overflow:hidden to clip the header to the card. */
    border: 1px solid var(--bgc-smoke);
    border-left: 4px solid var(--bgc-navy);
    border-radius: 0.5rem;
    overflow: hidden;
}

.bg-light-blue {
    background-color: var(--bgc-azure) !important;
    color: #fff;
    border-bottom: none;
    /* No own corner radius — the card (overflow:hidden) clips the header, so it
       fills flush to the navy bar instead of rounding away from it. */
    border-radius: 0;
}

.bg-light-blue .card-title {
    color: #fff;
}

/* Secure-message content shares bg-light-blue with portal card headers. */
#thread-metadata p.card-text.bg-light-blue,
#response-body > .card.bg-light-blue {
    background-color: #fff !important;
    color: var(--bgc-charcoal);
}

/* Section breaks on white — smoke headers (documents, my credentials) */
.card-header.bg-light {
    background-color: var(--bgc-smoke) !important;
    border-bottom: 2px solid var(--bgc-azure);
}

.card-header.bg-light .card-title {
    color: var(--bgc-navy);
}

.icon-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    min-width: 2.25rem;
    border-radius: 50%;
    background-color: var(--bgc-navy);
    color: #fff;
    margin-right: 0.75rem;
}

.bg-light-blue .icon-circle {
    background-color: #fff;
    color: var(--bgc-azure);
}

/* Primary CTAs — jade (sparing accent; white label for contrast) */
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--bgc-jade);
    --bs-btn-border-color: var(--bgc-jade);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #1f9a74;
    --bs-btn-hover-border-color: #1f9a74;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #1a8566;
    --bs-btn-active-border-color: #1a8566;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--bgc-jade);
    --bs-btn-disabled-border-color: var(--bgc-jade);
}

/* Pill / tag filters — sky */
.badge.bg-primary,
.badge.rounded-pill.bg-primary {
    background-color: var(--bgc-sky) !important;
    color: var(--bgc-navy);
}

.alert-info {
    --bs-alert-bg: color-mix(in srgb, var(--bgc-sky) 15%, white);
    --bs-alert-border-color: var(--bgc-sky);
    --bs-alert-color: var(--bgc-navy);
}

/* The Core dashboard notices for legacy exam applications link to /apply.
 * BGC surfaces in-progress applications through the dashboard's direct
 * /apply/application?id=... CTA instead. */
#alert-dash .user-notice:has(a[href="/apply"]),
#alert-dash .user-notice:has(a[href="/apply/"]) {
    display: none;
}

.tooltip.credential-verification-tooltip .tooltip-inner {
    color: var(--bgc-charcoal);
}

/* Utility classes used by credential interface */
.hidden {
    display: none;
}

/* Credential browse cards — Available Credentials / My Credentials */
.credential-card {
    margin-bottom: 1.5rem;
    border: 1px solid var(--bgc-smoke);
    border-left: 4px solid var(--bgc-navy);
    border-radius: 0.5rem;
    box-shadow: 0 0.125rem 0.375rem rgba(6, 84, 120, 0.08);
    overflow: hidden;
}

.credential-card.credential-card--held {
    border-left-color: var(--bgc-jade);
    background-color: color-mix(in srgb, var(--bgc-jade) 6%, white);
}

.credential-card > .card-header {
    background-color: var(--bgc-smoke);
    border-bottom: 2px solid var(--bgc-azure);
    padding: 0.875rem 1.25rem;
}

.credential-card-name {
    color: var(--bgc-navy);
    font-size: 1.25rem;
    font-weight: 600;
}

.credential-card > .card-body {
    padding: 1.25rem;
}

.credential-card .credential-requirements-list {
    margin-bottom: 0;
}

.credential-requirement-group {
    margin-bottom: 0.5rem;
}

.credential-requirement-group-heading {
    color: var(--bgc-charcoal);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    margin-bottom: 0.375rem;
    text-transform: uppercase;
}

.credential-requirement-group-heading .fa-check-circle {
    color: var(--bgc-jade);
    margin-right: 0.25rem;
}

.credential-requirement-group-items {
    padding-left: 0;
}

.credential-requirement {
    margin-bottom: 0.375rem;
    padding-left: 0;
    list-style: none;
}

.credential-requirement--satisfied {
    color: var(--bgc-jade);
}

.credential-requirement--satisfied .fa {
    margin-right: 0.35rem;
}

.credential-requirement-link {
    color: var(--bgc-azure);
    font-weight: 500;
    text-decoration: none;
}

.credential-requirement-link:hover {
    color: var(--bgc-navy);
    text-decoration: underline;
}

.credential-requirement-link .fa-external-link {
    font-size: 0.75em;
    margin-left: 0.25rem;
    opacity: 0.85;
}

.credential-card .credential-application-action-btns a.btn {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--bgc-jade);
    --bs-btn-border-color: var(--bgc-jade);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #1f9a74;
    --bs-btn-hover-border-color: #1f9a74;
    background-color: var(--bgc-jade) !important;
    border-color: var(--bgc-jade) !important;
    border-radius: 2rem;
    color: #fff !important;
    min-width: 8rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    text-decoration: none !important;
}

.credential-card .credential-application-action-btns a.btn:hover,
.credential-card .credential-application-action-btns a.btn:focus {
    background-color: #1f9a74 !important;
    border-color: #1f9a74 !important;
    color: #fff !important;
}

.credential-card .credential-application-action-btns a.btn .fa {
    color: #fff !important;
}

.credential-card .jumbotron-sm {
    background-color: var(--bgc-smoke);
    border-radius: 0.375rem;
    margin-left: 0;
    margin-right: 0;
    padding: 1.25rem 1rem;
    width: 100%;
}

.credential-card .progress {
    margin-left: 0;
    margin-right: 0;
}

.credential-card .ce_panel_heading {
    color: var(--bgc-azure);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.credential-card .btn-unpin {
    border: 0;
    font-size: 1.375rem;
    margin-right: -0.5rem;
    margin-top: -0.25rem;
    padding: 0.25rem 0.5rem 0;
}

.credential-card-description {
    border-top: 1px solid var(--bgc-smoke);
    color: var(--bgc-charcoal);
    font-size: 0.9375rem;
    margin-top: 1rem;
    padding-top: 1rem;
}

@media (max-width: 767.98px) {
    .credential-card .credential-application-action-btns .btn {
        width: 100%;
    }

    .credential-card .credential-application-action-btns {
        margin-top: 1rem;
    }
}