/* ================================================================
   PROJECT MEMORY — theme-clean-lightbox.css
   Fullscreen viewer: pm-lightbox, pm-lightbox-image,
   pm-lightbox-video, pm-lightbox-document, pm-lightbox-nav,
   pm-lightbox-counter.
   Depends on: theme-clean.css (tokens)
   ================================================================ */

/**
 * @pm-registry
 * @prefix pm
 * @description Full-screen lightbox overlay. True black, no padding, highest z-index.
 * @type        css-class
 * @name        pm-modal-overlay
 * @tags        TODO
 * @called-by   pm-lightbox.html, pm-modal-calendar-help.html, pm-modal-dialog.html, pm-modal-home-help.html, pm-modal-important-date-add.html, pm-modal-memory-detail.html, pm-modal-merge.html, pm-modal-note-add.html, pm-modal-note-append.html, pm-modal-note-attach.html, pm-modal-note-categories-help.html, pm-modal-note-categories.html, pm-modal-note-edit.html, pm-modal-note-email.html, pm-modal-notes-help.html, pm-modal-people-categories.html, pm-modal-people-help.html, pm-modal-person-edit.html, pm-modal-person-facts.html, pm-modal-place-categories.html, pm-modal-place-edit.html, pm-modal-place-facts.html, pm-modal-places-help.html, pm-modal-reminder-add.html, pm-modal-reminder-append.html, pm-modal-reminder-edit.html, pm-modal-reminders-help.html, pm-modal-search-help.html, pm-modal-voice-settings-help.html, pm-modal-voice-settings.html, pm-one-sheet.html
 * @depends-on  --pm-z-critical
 * @updated 2026-04-18
 */
#pm-lightbox.pm-modal-overlay {
    background: var(--pm-text-1);
    padding: 0;
    z-index: var(--pm-z-critical);
}

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-lightbox-img
 * @tags        themes
 * @description Full-screen image display within the lightbox, scaled to fit the viewport.
 * @depends-on  pm-lightbox
 * @called-by  pm-lightbox.html
 * @updated     2026-04-20
 */
.pm-lightbox-img,
/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-lightbox-video
 * @tags        themes
 * @description Styles a video to fit within the viewport for fullscreen display in a lightbox, ensuring it is centered and maintains its aspect ratio.
 * @called-by  pm-lightbox.html
 * @depends-on none
 * @updated     2026-05-03
 */
.pm-lightbox-video {
    max-width: 100vw;
    max-height: 100dvh;
    object-fit: contain;
    display: block;
    margin: auto;
}

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-lightbox-counter
 * @tags        themes
 * @description Absolute-positioned text showing the current index and total count of items in the lightbox.
 * @depends-on  pm-lightbox
 * @called-by  pm-lightbox.html
 * @updated     2026-04-20
 */
.pm-lightbox-counter {
    position: absolute;
    top: calc(20px + var(--pm-safe-top, 10px));
    left: 50%;
    transform: translateX(-50%);
    color: var(--pm-overlay-white-strong);
    font-size: 0.9rem;
    font-weight: 600;
    pointer-events: none;
    z-index: 10002;
}

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-lightbox-nav
 * @tags        themes
 * @description Base styling for circular navigation arrows (prev/next) in the lightbox.
 * @depends-on  pm-lightbox
 * @called-by  pm-lightbox.html
 * @updated     2026-04-20
 */
.pm-lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10001;
    background: var(--pm-overlay-white-faint);
    color: white;
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    font-size: 30px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.pm-lightbox-nav:active {
    background: var(--pm-overlay-white-soft);
}

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-lightbox-prev
 * @tags        themes
 * @description Left-aligned navigation button for viewing the previous item in the lightbox gallery.
 * @depends-on  pm-lightbox-nav
 * @called-by  pm-lightbox.html
 * @updated     2026-04-20
 */
.pm-lightbox-prev { left: 20px; }
/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-lightbox-next
 * @tags        themes
 * @description Right-aligned navigation button for viewing the next item in the lightbox gallery.
 * @depends-on  pm-lightbox-nav
 * @called-by  pm-lightbox.html
 * @updated     2026-04-20
 */
.pm-lightbox-next { right: 20px; }

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-lightbox-close
 * @tags        themes
 * @description Absolute-positioned close button in the top-right corner of the fullscreen lightbox.
 * @depends-on  pm-lightbox
 * @called-by  pm-lightbox.html
 * @updated     2026-04-20
 */
.pm-lightbox-close {
    position: absolute;
    top: calc(20px + var(--pm-safe-top, 10px));
    right: 20px;
    z-index: 10003;
    background: var(--pm-overlay-white-faint);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--pm-panel-surface);
}

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-lightbox-doc
 * @tags        themes
 * @description Centered flex container for document preview cards within the lightbox.
 * @depends-on  pm-lightbox
 * @called-by  pm-lightbox.html
 * @updated     2026-04-20
 */
.pm-lightbox-doc {
    display: flex;
    width: 95%;
    height: 90%;
}

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-lightbox-doc-frame
 * @tags        themes
 * @description Styles the iframe or container for a document preview in the lightbox, making it fill its parent and giving it a white background.
 * @called-by  pm-lightbox.html
 * @depends-on none
 * @updated     2026-05-03
 */
.pm-lightbox-doc-frame {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: var(--pm-radius-small);
    background: white;
}


/* Hide nav arrows on mobile if touch is available */
@media (hover: none) and (pointer: coarse) {
    .pm-lightbox-nav { display: none !important; }
}