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

   File      : credential-asset-preview.css
   Version   : 1.1.1
   Status    : ACTIVE
   Phase     : Credential Workspace Stabilization

   Purpose
   ----------------------------------------------------------
   Provides the governed visual experience for previewing
   published credential assets inside the shared Credential
   Workspace.

   Responsibilities
   ----------------------------------------------------------
   ✓ Asset Preview Overlay
   ✓ Asset Preview Dialog
   ✓ Large PDF Preview Surface
   ✓ Image and Badge Preview Surface
   ✓ Preview Header
   ✓ Preview Actions
   ✓ Fallback Link Presentation
   ✓ Responsive Behaviour
   ✓ Accessible Focus States
   ✓ Light and Dark Theme Compatibility
   ✓ Scroll Containment

   Non-Responsibilities
   ----------------------------------------------------------
   ✗ Certificate generation
   ✗ Badge generation
   ✗ Credential asset resolution
   ✗ Download behaviour
   ✗ LinkedIn sharing behaviour
   ✗ Overlay lifecycle
   ✗ Back-navigation behaviour
   ✗ JavaScript rendering

   Architectural Position
   ----------------------------------------------------------
   Credential Detail Overlay
        ↓
   Credential Assets Section
        ↓
   Credential Asset Service
        ↓
   Credential Asset Preview
        ↓
   Asset-Specific Renderer

   Governance
   ----------------------------------------------------------
   • The preview dialog must use the available viewport.

   • PDF assets must receive a large readable surface.

   • The modal must avoid unnecessary nested scrolling.

   • The action footer must remain visible.

   • The preview surface must remain renderer-agnostic.

   • The stylesheet must not duplicate overlay lifecycle
     behaviour.

   • Published asset URLs remain controlled by the
     Credential Asset Service.

   Dependencies
   ----------------------------------------------------------
   • overlay.css
   • credential-asset-preview.js
   • certificate-preview.js
   • trainer-certificate-preview.js
   • badge-preview.js

   Change History
   ----------------------------------------------------------
   v1.1.1

    • Corrected preview token scope for Credential Detail Overlay
    • Restored visible LinkedIn action styling
    • Added defensive button colour fallbacks
    • Preserved light and dark theme compatibility

   v1.1.0

   • Increased desktop dialog width
   • Increased usable preview height
   • Added large PDF iframe, object and embed surfaces
   • Reduced unnecessary nested scroll regions
   • Added fixed header and footer behaviour
   • Improved fallback link presentation
   • Refined action hierarchy
   • Improved responsive behaviour
   • Added accessible focus states
   • Added light and dark theme support
   • Added reduced-motion support
   • Preserved shared component boundaries

   v1.0.0

   • Initial governed implementation
   • Added shared preview dialog
   • Added preview actions
   • Added responsive presentation

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


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

.credential-detail-overlay {

    --asset-preview-surface:
        #ffffff;

    --asset-preview-surface-muted:
        #f8fafc;

    --asset-preview-surface-subtle:
        #f1f5f9;

    --asset-preview-border:
        #dbe3ec;

    --asset-preview-border-strong:
        #cbd5e1;

    --asset-preview-text:
        #0f172a;

    --asset-preview-text-muted:
        #64748b;

    --asset-preview-action:
        #1f2937;

    --asset-preview-action-hover:
        #111827;

    --asset-preview-secondary:
        #e5e7eb;

    --asset-preview-secondary-hover:
        #d1d5db;

    --asset-preview-focus:
        #93c5fd;

    --asset-preview-shadow:
        0 28px 72px rgba(
            15,
            23,
            42,
            0.28
        );

}


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

.credential-detail-overlay {

    position:
        fixed;

    inset:
        0;

    z-index:
        3000;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        24px;

}


/* ==========================================================
   BACKDROP
========================================================== */

.credential-asset-preview-backdrop {

    position:
        absolute;

    inset:
        0;

    background:
        rgba(
            15,
            23,
            42,
            0.68
        );

    backdrop-filter:
        blur(5px);

    -webkit-backdrop-filter:
        blur(5px);

}


/* ==========================================================
   DIALOG
========================================================== */

.credential-asset-preview-dialog {

    position:
        relative;

    z-index:
        1;

    display:
        flex;

    flex-direction:
        column;

    width:
        min(
            1180px,
            calc(100vw - 48px)
        );

    height:
        min(
            900px,
            calc(100vh - 48px)
        );

    max-height:
        calc(100vh - 48px);

    margin:
        0;

    overflow:
        hidden;

    background:
        var(
            --asset-preview-surface
        );

    color:
        var(
            --asset-preview-text
        );

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.12
        );

    border-radius:
        18px;

    box-shadow:
        var(
            --asset-preview-shadow
        );

}


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

.credential-asset-preview-header {

    position:
        relative;

    z-index:
        3;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    flex:
        0 0 auto;

    min-height:
        82px;

    padding:
        20px 28px;

    border-bottom:
        1px solid
        var(
            --asset-preview-border
        );

    background:
        var(
            --asset-preview-surface
        );

}

.credential-asset-preview-header > div {

    min-width:
        0;

}

.credential-asset-preview-label {

    margin:
        0 0 6px;

    color:
        var(
            --asset-preview-text-muted
        );

    font-size:
        12px;

    font-weight:
        800;

    letter-spacing:
        0.09em;

    line-height:
        1.4;

    text-transform:
        uppercase;

}

.credential-asset-preview-header h2 {

    margin:
        0;

    overflow:
        hidden;

    color:
        var(
            --asset-preview-text
        );

    font-size:
        clamp(
            22px,
            2.4vw,
            28px
        );

    font-weight:
        800;

    line-height:
        1.25;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;

}


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

.credential-asset-preview-close {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        42px;

    height:
        42px;

    flex:
        0 0 auto;

    padding:
        0;

    border:
        none;

    border-radius:
        50%;

    background:
        transparent;

    color:
        var(
            --asset-preview-text
        );

    font-size:
        24px;

    font-weight:
        700;

    line-height:
        1;

    cursor:
        pointer;

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

}

.credential-asset-preview-close:hover {

    background:
        var(
            --asset-preview-surface-subtle
        );

    transform:
        scale(1.03);

}

.credential-asset-preview-close:focus-visible {

    outline:
        3px solid
        var(
            --asset-preview-focus
        );

    outline-offset:
        3px;

}


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

   The body is the only vertically scrollable modal region.

   Asset-specific iframe/object/embed elements receive their
   own PDF viewer controls, but the surrounding preview must
   not create an additional narrow scrolling container.
========================================================== */

.credential-asset-preview-body {

    flex:
        1 1 auto;

    min-height:
        0;

    overflow-x:
        hidden;

    overflow-y:
        auto;

    padding:
        28px;

    background:
        var(
            --asset-preview-surface-muted
        );

    scrollbar-gutter:
        stable;

}


/* ==========================================================
   INTERNAL PREVIEW HEADER / NAVIGATION
========================================================== */

.credential-asset-preview-body
.credential-asset-preview-header-row,
.credential-asset-preview-body
.asset-preview-header,
.credential-asset-preview-body
.asset-preview-toolbar {

    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        24px;

    margin-bottom:
        22px;

}

.credential-asset-preview-body
.asset-preview-back,
.credential-asset-preview-body
[data-asset-preview-back] {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    color:
        var(
            --asset-preview-text
        );

    font-size:
        15px;

    font-weight:
        700;

    text-decoration:
        none;

    cursor:
        pointer;

}

.credential-asset-preview-body
.asset-preview-back:hover,
.credential-asset-preview-body
[data-asset-preview-back]:hover {

    text-decoration:
        underline;

}


/* ==========================================================
   SHARED PREVIEW SURFACE
========================================================== */

.asset-preview-certificate,
.asset-preview-badge {

    width:
        100%;

    max-width:
        none;

    margin:
        0;

    padding:
        0;

    overflow:
        hidden;

    background:
        var(
            --asset-preview-surface
        );

    border:
        1px solid
        var(
            --asset-preview-border
        );

    border-radius:
        12px;

    box-shadow:
        0 8px 24px rgba(
            15,
            23,
            42,
            0.06
        );

    text-align:
        center;

}


/* ==========================================================
   PDF PREVIEW SURFACE

   Supports iframe, object and embed-based renderers.

   The selectors intentionally remain scoped beneath the
   credential asset preview component.
========================================================== */

.credential-asset-preview-body iframe,
.credential-asset-preview-body object,
.credential-asset-preview-body embed,
.asset-preview-certificate iframe,
.asset-preview-certificate object,
.asset-preview-certificate embed {

    display:
        block;

    width:
        100%;

    height:
        clamp(
            520px,
            64vh,
            720px
        );

    min-height:
        520px;

    margin:
        0;

    padding:
        0;

    border:
        none;

    background:
        #ffffff;

}


/* ==========================================================
   PUBLISHED IMAGE PREVIEW
========================================================== */

.credential-asset-preview-body img.asset-preview-image,
.asset-preview-certificate img,
.asset-preview-badge img {

    display:
        block;

    width:
        auto;

    max-width:
        100%;

    max-height:
        min(
            68vh,
            760px
        );

    margin:
        0 auto;

    object-fit:
        contain;

}


/* ==========================================================
   GENERATED CERTIFICATE CONTENT

   Retained for renderer-generated HTML fallback previews.
========================================================== */

.asset-preview-certificate:not(:has(iframe))
:not(:has(object))
:not(:has(embed)) {

    padding:
        42px;

}

.asset-preview-kicker {

    margin:
        0 0 14px;

    color:
        var(
            --asset-preview-text-muted
        );

    font-size:
        13px;

    font-weight:
        800;

    letter-spacing:
        0.09em;

    line-height:
        1.4;

    text-transform:
        uppercase;

}

.asset-preview-certificate h2,
.asset-preview-badge h2 {

    margin:
        0 0 16px;

    color:
        var(
            --asset-preview-text
        );

    font-size:
        clamp(
            26px,
            3vw,
            36px
        );

    font-weight:
        800;

    line-height:
        1.2;

}

.asset-preview-certificate h3 {

    margin:
        20px 0;

    color:
        var(
            --asset-preview-text
        );

    font-size:
        clamp(
            26px,
            3vw,
            34px
        );

    font-weight:
        800;

}

.asset-preview-certificate h4 {

    margin:
        16px 0;

    color:
        var(
            --asset-preview-text
        );

    font-size:
        20px;

    font-weight:
        700;

}

.asset-preview-id {

    margin-top:
        28px;

    color:
        var(
            --asset-preview-text-muted
        );

    font-size:
        14px;

}


/* ==========================================================
   DIGITAL BADGE
========================================================== */

.asset-preview-badge {

    padding:
        42px;

}

.asset-preview-badge-mark {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        148px;

    height:
        148px;

    margin:
        0 auto 28px;

    border-radius:
        50%;

    background:
        #1e3a5f;

    color:
        #ffffff;

    font-size:
        30px;

    font-weight:
        800;

}


/* ==========================================================
   PREVIEW FALLBACK / NOTE
========================================================== */

.credential-asset-preview-note {

    margin:
        18px 0 0;

    padding:
        0;

    color:
        var(
            --asset-preview-text-muted
        );

    font-size:
        14px;

    line-height:
        1.6;

    text-align:
        left;

}

.credential-asset-preview-note a,
.asset-preview-fallback a,
.credential-asset-preview-body
a[href*="http"] {

    color:
        #1e3a5f;

    font-weight:
        700;

    text-underline-offset:
        3px;

}

.credential-asset-preview-note a:hover,
.asset-preview-fallback a:hover {

    color:
        #0f172a;

}


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

.credential-asset-preview-actions {

    position:
        relative;

    z-index:
        3;

    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-end;

    flex:
        0 0 auto;

    gap:
        12px;

    min-height:
        84px;

    padding:
        16px 28px;

    border-top:
        1px solid
        var(
            --asset-preview-border
        );

    background:
        var(
            --asset-preview-surface
        );

}


/* ==========================================================
   ACTION BUTTONS
========================================================== */

.credential-asset-preview-button {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-width:
        150px;

    min-height:
        46px;

    padding:
        11px 20px;

    border:
        1px solid
        transparent;

    border-radius:
        10px;

    font-size:
        15px;

    font-weight:
        750;

    line-height:
        1.4;

    text-align:
        center;

    text-decoration:
        none;

    cursor:
        pointer;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;

}

.credential-asset-preview-button:hover {

    transform:
        translateY(-1px);

}

.credential-asset-preview-button:active {

    transform:
        translateY(0);

}

.credential-asset-preview-button:focus-visible {

    outline:
        3px solid
        var(
            --asset-preview-focus
        );

    outline-offset:
        3px;

}

.credential-asset-preview-button.primary {

    background:
        var(
            --asset-preview-action,
            #1f2937
        );

    color:
        #ffffff;

    box-shadow:
        0 6px 16px rgba(
            15,
            23,
            42,
            0.15
        );

}

.credential-asset-preview-button.primary:hover {

    background:
        var(
            --asset-preview-action-hover,
            #111827
        );

    box-shadow:
        0 8px 20px rgba(
            15,
            23,
            42,
            0.20
        );

}

.credential-asset-preview-button.secondary {

    border-color:
        var(
            --asset-preview-border,
            #dbe3ec
        );

    background:
        var(
            --asset-preview-secondary,
            #e5e7eb
        );

    color:
        var(
            --asset-preview-text,
            #0f172a
        );

}

.credential-asset-preview-button.secondary:hover {

    border-color:
        var(
            --asset-preview-border-strong,
            #cbd5e1
        );

    background:
        var(
            --asset-preview-secondary-hover,
            #d1d5db
        );

}


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

.asset-preview-empty {

    padding:
        64px 28px;

    border:
        1px dashed
        var(
            --asset-preview-border-strong
        );

    border-radius:
        12px;

    background:
        var(
            --asset-preview-surface
        );

    text-align:
        center;

}

.asset-preview-empty h3 {

    margin:
        0 0 12px;

    color:
        var(
            --asset-preview-text
        );

}

.asset-preview-empty p {

    margin:
        0;

    color:
        var(
            --asset-preview-text-muted
        );

}


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

   Supports common theme indicators already used by portal
   applications. Selectors are intentionally component-scoped.
========================================================== */

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

    --asset-preview-surface:
        #111827;

    --asset-preview-surface-muted:
        #0f172a;

    --asset-preview-surface-subtle:
        #1f2937;

    --asset-preview-border:
        #334155;

    --asset-preview-border-strong:
        #475569;

    --asset-preview-text:
        #f8fafc;

    --asset-preview-text-muted:
        #cbd5e1;

    --asset-preview-action:
        #e5e7eb;

    --asset-preview-action-hover:
        #ffffff;

    --asset-preview-secondary:
        #1f2937;

    --asset-preview-secondary-hover:
        #334155;

    --asset-preview-focus:
        #60a5fa;

}

html[data-theme="dark"]
.credential-asset-preview-button.primary,
body[data-theme="dark"]
.credential-asset-preview-button.primary,
.dark-theme
.credential-asset-preview-button.primary,
.theme-dark
.credential-asset-preview-button.primary {

    color:
        #111827;

}

html[data-theme="dark"]
.credential-asset-preview-note a,
body[data-theme="dark"]
.credential-asset-preview-note a,
.dark-theme
.credential-asset-preview-note a,
.theme-dark
.credential-asset-preview-note a {

    color:
        #bfdbfe;

}


/* ==========================================================
   RESPONSIVE — TABLET
========================================================== */

@media (max-width: 900px) {

    .credential-detail-overlay {

        padding:
            16px;

    }

    .credential-asset-preview-dialog {

        width:
            calc(100vw - 32px);

        height:
            calc(100vh - 32px);

        max-height:
            calc(100vh - 32px);

    }

    .credential-asset-preview-body {

        padding:
            20px;

    }

    .credential-asset-preview-body iframe,
    .credential-asset-preview-body object,
    .credential-asset-preview-body embed,
    .asset-preview-certificate iframe,
    .asset-preview-certificate object,
    .asset-preview-certificate embed {

        height:
            clamp(
                480px,
                62vh,
                680px
            );

        min-height:
            480px;

    }

}


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

@media (max-width: 768px) {

    .credential-detail-overlay {

        display:
            block;

        padding:
            0;

    }

    .credential-asset-preview-dialog {

        width:
            100vw;

        height:
            100dvh;

        max-height:
            100dvh;

        margin:
            0;

        border:
            none;

        border-radius:
            0;

    }

    .credential-asset-preview-header {

        min-height:
            70px;

        padding:
            14px 16px;

    }

    .credential-asset-preview-header h2 {

        max-width:
            calc(100vw - 90px);

        font-size:
            20px;

    }

    .credential-asset-preview-body {

        padding:
            14px;

    }

    .credential-asset-preview-body
    .credential-asset-preview-header-row,
    .credential-asset-preview-body
    .asset-preview-header,
    .credential-asset-preview-body
    .asset-preview-toolbar {

        flex-direction:
            column;

        align-items:
            flex-start;

        gap:
            12px;

    }

    .credential-asset-preview-body iframe,
    .credential-asset-preview-body object,
    .credential-asset-preview-body embed,
    .asset-preview-certificate iframe,
    .asset-preview-certificate object,
    .asset-preview-certificate embed {

        height:
            58vh;

        min-height:
            420px;

    }

    .asset-preview-certificate:not(:has(iframe))
    :not(:has(object))
    :not(:has(embed)),
    .asset-preview-badge {

        padding:
            28px 18px;

    }

    .credential-asset-preview-actions {

        flex-direction:
            column;

        align-items:
            stretch;

        gap:
            10px;

        min-height:
            auto;

        padding:
            14px 16px;

    }

    .credential-asset-preview-button {

        width:
            100%;

        min-width:
            0;

    }

}


/* ==========================================================
   SMALL MOBILE
========================================================== */

@media (max-width: 480px) {

    .credential-asset-preview-body iframe,
    .credential-asset-preview-body object,
    .credential-asset-preview-body embed,
    .asset-preview-certificate iframe,
    .asset-preview-certificate object,
    .asset-preview-certificate embed {

        height:
            54vh;

        min-height:
            360px;

    }

}


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

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

    .credential-asset-preview-close,
    .credential-asset-preview-button {

        transition:
            none;

    }

    .credential-asset-preview-close:hover,
    .credential-asset-preview-button:hover {

        transform:
            none;

    }

}