/* ==========================================================
   Agile AI University
   Student & Executive Portal

   File      : credential-detail-overlay.css
   Version   : 1.3.0
   Status    : ACTIVE
   Phase     : Credential Workspace Stabilization

   Purpose
   ----------------------------------------------------------
   Provides the governed visual presentation for the
   Credential Detail Workspace.

   Responsibilities
   ----------------------------------------------------------
   ✓ Credential Holder Identity Presentation
   ✓ Credential Detail Header
   ✓ Credential Detail Sections
   ✓ Credential Metadata Layout
   ✓ Recognition Display
   ✓ Verification Action
   ✓ Credential Assets Layout
   ✓ Overlay Header Layering
   ✓ Close Action Accessibility
   ✓ Authoritative Overlay Visibility
   ✓ Responsive Credential Layout
   ✓ Light and Dark Theme Compatibility
   ✓ Asset Preview View Compatibility

   Non-Responsibilities
   ----------------------------------------------------------
   ✗ Generic Overlay Positioning
   ✗ Generic Backdrop Styling
   ✗ Overlay Lifecycle Decisions
   ✗ Credential Retrieval
   ✗ Credential Holder Resolution
   ✗ Credential Asset Resolution
   ✗ Asset Preview Rendering
   ✗ Business Logic
   ✗ JavaScript Behaviour

   Architectural Position
   ----------------------------------------------------------
   Generic Overlay Framework
        ↓
   Credential Detail Overlay
        ↓
   Credential Holder Identity
        ↓
   Credential Programme Details
        ↓
   Credential Sections
        ↓
   Credential Asset Preview

   Governance
   ----------------------------------------------------------
   • Credential Detail Overlay Authority

   • Presentation Layer Only

   • Single Responsibility

   • Single Overlay Experience

   • Credential-holder identity is supplied by the
     resolved credential ViewModel.

   • This stylesheet controls presentation only and
     must never resolve learner identity.

   • Native hidden state is authoritative for closed
     Credential Workspace visibility.

   • Generic overlay styles must never override the
     native hidden state.

   • Close controls must remain clickable above
     credential content and embedded asset previews.

   • Asset preview styles remain owned by
     credential-asset-preview.css.

   • Generic overlay geometry remains owned by
     overlay.css.

   Dependencies
   ----------------------------------------------------------
   • overlay.css
   • credential-detail-overlay.js
   • credential-detail-header.js
   • credential-information-section.js
   • credential-recognition-section.js
   • credential-verification-section.js
   • credential-assets-section.js
   • credential-asset-preview.css

   Change History
   ----------------------------------------------------------
   v1.3.0

   • Added governed Credential Holder label styling
   • Added professional Credential Holder name styling
   • Added responsive holder-name typography
   • Added long-name wrapping protection
   • Preserved light and dark theme compatibility
   • Preserved authoritative overlay hidden state
   • Preserved single-overlay architecture

   v1.2.1

   • Added authoritative overlay hidden-state support
   • Prevented closed Credential Workspace from remaining
     visible after its state was cleared
   • Aligned CSS visibility with the JavaScript lifecycle
   • Added explicit root overlay hidden selector
   • Preserved close-action layering
   • Preserved responsive and dark-theme behaviour
   • Preserved single-overlay architecture

   v1.2.0

   • Added governed overlay colour tokens
   • Added stable overlay-header layering
   • Added explicit close-button pointer handling
   • Added close-button hover and focus states
   • Added dark-theme compatibility
   • Improved section spacing and borders
   • Improved metadata readability
   • Improved asset-action responsiveness
   • Added asset-preview view compatibility
   • Preserved generic overlay framework ownership

   v1.1.0

   • Added credential-detail section styling
   • Added credential metadata grid
   • Added credential assets layout
   • Added responsive credential layout

========================================================== */


/* ==========================================================
   COMPONENT TOKENS
========================================================== */

.credential-detail-overlay {

    --credential-detail-surface:
        #ffffff;

    --credential-detail-surface-muted:
        #f8fafc;

    --credential-detail-surface-hover:
        #f1f5f9;

    --credential-detail-border:
        #e2e8f0;

    --credential-detail-border-strong:
        #cbd5e1;

    --credential-detail-text:
        #0f172a;

    --credential-detail-text-secondary:
        #334155;

    --credential-detail-text-muted:
        #64748b;

    --credential-detail-focus:
        #93c5fd;

    --credential-detail-focus-ring:
        rgba(
            30,
            64,
            175,
            0.18
        );

}


/* ==========================================================
   OVERLAY VISIBILITY

   Native hidden state is authoritative.

   credential-detail-overlay.js applies:

       overlay.hidden = true

   when the workspace closes.

   This rule prevents generic overlay display rules from
   keeping an empty Credential Workspace shell visible.
========================================================== */

.credential-detail-overlay[hidden] {

    display:
        none !important;

}


/* ==========================================================
   OVERLAY CONTAINER
========================================================== */

.credential-detail-overlay
.overlay-container {

    background:
        var(
            --credential-detail-surface
        );

    color:
        var(
            --credential-detail-text
        );

}


/* ==========================================================
   OVERLAY HEADER

   The header and close action must remain above iframe,
   object and embed-based credential previews.
========================================================== */

.credential-detail-overlay
.overlay-header {

    position:
        relative;

    z-index:
        20;

    flex:
        0 0 auto;

    background:
        var(
            --credential-detail-surface
        );

    border-bottom-color:
        var(
            --credential-detail-border
        );

}

.credential-detail-overlay
.overlay-title {

    min-width:
        0;

    color:
        var(
            --credential-detail-text
        );

}


/* ==========================================================
   CLOSE ACTION
========================================================== */

.credential-detail-overlay
.overlay-close {

    position:
        relative;

    z-index:
        21;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    flex:
        0 0 auto;

    pointer-events:
        auto;

    cursor:
        pointer;

    color:
        var(
            --credential-detail-text
        );

    background:
        transparent;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;

}

.credential-detail-overlay
.overlay-close:hover {

    background:
        var(
            --credential-detail-surface-hover
        );

    transform:
        scale(1.03);

}

.credential-detail-overlay
.overlay-close:active {

    transform:
        scale(1);

}

.credential-detail-overlay
.overlay-close:focus-visible {

    outline:
        3px solid
        var(
            --credential-detail-focus
        );

    outline-offset:
        3px;

}


/* ==========================================================
   ROOT BODY
========================================================== */

.credential-detail-overlay
.overlay-body {

    position:
        relative;

    z-index:
        1;

    display:
        flex;

    flex-direction:
        column;

    gap:
        1.5rem;

    min-height:
        0;

    color:
        var(
            --credential-detail-text
        );

    background:
        var(
            --credential-detail-surface
        );

}


/* ==========================================================
   FOOTER
========================================================== */

.credential-detail-overlay
.overlay-footer {

    position:
        relative;

    z-index:
        20;

    flex:
        0 0 auto;

    background:
        var(
            --credential-detail-surface
        );

    border-top-color:
        var(
            --credential-detail-border
        );

}

.credential-detail-overlay
.overlay-footer[hidden] {

    display:
        none !important;

}


/* ==========================================================
   CREDENTIAL DETAIL HEADER
========================================================== */

.credential-detail-header {

    display:
        flex;

    flex-direction:
        column;

    gap:
        1.25rem;

}

.credential-detail-header-main {

    display:
        flex;

    flex-direction:
        column;

    gap:
        0.5rem;

    min-width:
        0;

}


/* ==========================================================
   CREDENTIAL HOLDER IDENTITY
========================================================== */

.credential-detail-holder-label {

    margin:
        0 0 0.2rem;

    color:
        var(
            --credential-detail-text-muted
        );

    font-size:
        0.75rem;

    font-weight:
        800;

    line-height:
        1.4;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;

}

.credential-detail-holder-name {

    max-width:
        100%;

    margin:
        0 0 0.75rem;

    color:
        var(
            --credential-detail-text
        );

    font-size:
        clamp(
            1.25rem,
            2.1vw,
            1.5rem
        );

    font-weight:
        750;

    line-height:
        1.3;

    overflow-wrap:
        anywhere;

    word-break:
        normal;

}


/* ==========================================================
   PROGRAMME IDENTITY
========================================================== */

.credential-detail-program-code {

    margin:
        0;

    color:
        var(
            --credential-detail-text-secondary
        );

    font-size:
        0.95rem;

    font-weight:
        600;

    line-height:
        1.4;

    letter-spacing:
        0.02em;

}

.credential-detail-program-name {

    max-width:
        100%;

    margin:
        0;

    color:
        var(
            --credential-detail-text
        );

    font-size:
        1.75rem;

    font-weight:
        700;

    line-height:
        1.2;

    overflow-wrap:
        anywhere;

}


/* ==========================================================
   HEADER METADATA
========================================================== */

.credential-detail-header-meta {

    display:
        grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(
                220px,
                1fr
            )
        );

    gap:
        0.75rem 1.25rem;

    max-width:
        760px;

}

.credential-detail-header-meta
div {

    min-width:
        0;

    color:
        var(
            --credential-detail-text-secondary
        );

    font-size:
        0.95rem;

    line-height:
        1.45;

    overflow-wrap:
        anywhere;

}

.credential-detail-header-meta
strong {

    color:
        var(
            --credential-detail-text
        );

    font-weight:
        700;

}

.credential-detail-header-meta
span {

    color:
        inherit;

}


/* ==========================================================
   SECTIONS
========================================================== */

.credential-recognition-section,
.credential-verification-section,
.credential-assets-section {

    padding-top:
        1.25rem;

    border-top:
        1px solid
        var(
            --credential-detail-border
        );

}

.credential-section-title {

    margin:
        0 0 1rem;

    color:
        var(
            --credential-detail-text
        );

    font-size:
        1rem;

    font-weight:
        700;

    line-height:
        1.4;

}


/* ==========================================================
   INFORMATION GRID
========================================================== */

.credential-information-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(
                220px,
                1fr
            )
        );

    align-items:
        start;

    gap:
        0.85rem 1.25rem;

}

.credential-field {

    display:
        flex;

    flex-direction:
        column;

    gap:
        0.35rem;

    min-width:
        0;

}

.credential-field
strong {

    color:
        var(
            --credential-detail-text-muted
        );

    font-size:
        0.82rem;

    font-weight:
        700;

    line-height:
        1.35;

    letter-spacing:
        0.04em;

    text-transform:
        uppercase;

}

.credential-field
span {

    color:
        var(
            --credential-detail-text
        );

    font-size:
        0.96rem;

    line-height:
        1.45;

    overflow-wrap:
        anywhere;

}


/* ==========================================================
   VERIFICATION
========================================================== */

.credential-verification-section
.credential-field {

    align-items:
        flex-start;

}

.credential-verification-section
.btn {

    width:
        fit-content;

    text-decoration:
        none;

}


/* ==========================================================
   ASSETS
========================================================== */

.credential-assets-grid {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        0.75rem;

}

.credential-assets-grid
.btn {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-width:
        180px;

    text-align:
        center;

    text-decoration:
        none;

}


/* ==========================================================
   FOCUSED SECTION
========================================================== */

.credential-section--focused {

    outline:
        2px solid
        var(
            --credential-detail-focus-ring
        );

    outline-offset:
        6px;

    border-radius:
        10px;

}


/* ==========================================================
   EMPTY STATE
========================================================== */

.credential-empty {

    padding:
        3rem 2rem;

    color:
        var(
            --credential-detail-text-muted
        );

    text-align:
        center;

}


/* ==========================================================
   ASSET PREVIEW MODE

   The asset-preview renderer remains responsible for its
   internal surface.

   These rules only ensure that the parent Credential Detail
   Overlay does not obstruct preview navigation or actions.
========================================================== */

.credential-detail-overlay
.credential-asset-preview-workspace {

    position:
        relative;

    z-index:
        1;

    min-width:
        0;

}

.credential-detail-overlay
.credential-asset-preview-header {

    position:
        relative;

    z-index:
        5;

}

.credential-detail-overlay
.credential-asset-preview-actions {

    position:
        relative;

    z-index:
        5;

}

.credential-detail-overlay
.credential-published-asset-frame {

    position:
        relative;

    z-index:
        1;

}


/* ==========================================================
   DARK THEME
========================================================== */

html[data-theme="dark"]
.credential-detail-overlay,
body[data-theme="dark"]
.credential-detail-overlay,
.dark-theme
.credential-detail-overlay,
.theme-dark
.credential-detail-overlay {

    --credential-detail-surface:
        #111827;

    --credential-detail-surface-muted:
        #0f172a;

    --credential-detail-surface-hover:
        #1f2937;

    --credential-detail-border:
        #334155;

    --credential-detail-border-strong:
        #475569;

    --credential-detail-text:
        #f8fafc;

    --credential-detail-text-secondary:
        #cbd5e1;

    --credential-detail-text-muted:
        #94a3b8;

    --credential-detail-focus:
        #60a5fa;

    --credential-detail-focus-ring:
        rgba(
            96,
            165,
            250,
            0.24
        );

}


/* ==========================================================
   RESPONSIVE — MOBILE
========================================================== */

@media (max-width: 768px) {

    .credential-detail-overlay
    .overlay-header {

        padding:
            1rem 1.25rem;

    }

    .credential-detail-overlay
    .overlay-title {

        max-width:
            calc(100% - 56px);

        overflow:
            hidden;

        text-overflow:
            ellipsis;

        white-space:
            nowrap;

    }

    .credential-detail-overlay
    .overlay-body {

        gap:
            1.25rem;

        padding:
            1.25rem;

    }

    .credential-detail-holder-label {

        font-size:
            0.7rem;

    }

    .credential-detail-holder-name {

        margin-bottom:
            0.65rem;

        font-size:
            1.2rem;

    }

    .credential-detail-program-name {

        font-size:
            1.4rem;

    }

    .credential-detail-header-meta,
    .credential-information-grid {

        grid-template-columns:
            minmax(
                0,
                1fr
            );

    }

    .credential-assets-grid {

        flex-direction:
            column;

    }

    .credential-assets-grid
    .btn,
    .credential-verification-section
    .btn {

        width:
            100%;

    }

}


/* ==========================================================
   REDUCED MOTION
========================================================== */

@media (prefers-reduced-motion: reduce) {

    .credential-detail-overlay
    .overlay-close {

        transition:
            none;

    }

    .credential-detail-overlay
    .overlay-close:hover {

        transform:
            none;

    }

}