/* ==========================================================================
   Quercia viva — the attachment preview.

   One modal for every file the application shows: a PDF drawn by PDF.js, a
   photo in Viewer.js, a card with *Scarica* for the rest. Global rather than
   page-scoped, like work-sheet.css: it opens from the job sheet, the job page,
   the report, the estimate, an irrigation system and the settings, so it
   belongs to the layout (templates/base/_attachment_preview.html.twig).
   ========================================================================== */

/* ------------------------------------------------------------------ *
 * The layer: above the job sheet, under the dialog
 * ------------------------------------------------------------------ */

/* It opens from inside the job sheet and the report's notes modal, both at
 * Bootstrap's 1055. Document order would already put it on top — it is
 * included after the sheet — but the veil is another matter: Bootstrap's
 * backdrops are all 1050, and a file over a sheet that is still lit does not
 * read as the thing in front. attachment_preview_controller.js marks the veil
 * it caused. Under QcDialog (1070/1065) and the toast (1090). */
.qc-preview.modal { z-index: 1060; }
.modal-backdrop.qc-preview-backdrop { z-index: 1058; }

/* Wider than modal-xl: a PDF page needs the width to stay readable. */
.qc-preview__dialog {
    max-width: min(1280px, calc(100vw - 2rem));
}

.qc-preview .modal-content {
    overflow: hidden;
    border-radius: var(--qc-radius-panel);
    background: var(--qc-surface-overlay);
}

/* ------------------------------------------------------------------ *
 * The bar: the name on the left, what can be done with it on the right
 * ------------------------------------------------------------------ */
.qc-preview__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1rem;
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--qc-border);
}

.qc-preview__title {
    flex: 1 1 12rem;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    font-family: var(--qc-font-display);
    font-size: var(--qc-fs-xl);
    font-weight: 600;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--qc-text-primary);
}

.qc-preview__tools,
.qc-preview__group,
.qc-preview__zoom {
    display: flex;
    align-items: center;
    gap: .375rem;
}

.qc-preview__tools {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .75rem;
}

/* One height for the whole bar. `btn-sm btn-icon` alone collapsed to the
   width of a 12px glyph with no side padding — a 14×24 target. The icon-only
   buttons are squares, large enough to press on a phone, with the glyph at a
   readable size. */
.qc-preview__tools .btn {
    min-height: 2.25rem;
}
.qc-preview__tools .btn-icon {
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.qc-preview__tools .btn-icon .ti {
    font-size: 1.25rem;
    width: auto;
    height: auto;
    margin: 0;
}

.qc-preview__tools .btn-close {
    margin-left: .25rem;
}

.qc-preview__position,
.qc-preview__level {
    min-width: 3.5rem;
    text-align: center;
    font-size: var(--qc-fs-sm);
    color: var(--qc-text-secondary);
}

.qc-preview__group[hidden],
.qc-preview__zoom[hidden] {
    display: none;
}

/* ------------------------------------------------------------------ *
 * The body: one pane at a time, all the same box
 * ------------------------------------------------------------------ */
.qc-preview__body {
    position: relative;
    height: min(82vh, 1100px);
    min-height: 22rem;
    overflow: hidden;
    background: var(--qc-surface-light);
}

.qc-preview__pane {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.qc-preview__pane[hidden] {
    display: none;
}

/* Viewer.js paints its own canvas over this wrapper; the raw <img> stays
   invisible so it never flashes at full size before the viewer takes it. */
.qc-preview__viewer {
    display: block;
}
.qc-preview__viewer > img {
    max-width: 100%;
    visibility: hidden;
}

/* Viewer.js's stylesheet arrives after this one (it is imported on first use),
   hence the extra class: the stage takes the modal's surface in both themes. */
.qc-preview .qc-preview__viewer .viewer-container,
.qc-preview .qc-preview__viewer .viewer-backdrop {
    background-color: var(--qc-surface-light);
}

/* PDF pages, one canvas each. The pane scrolls both ways: past 100% the pages
   are wider than it, and the auto margins collapse so nothing is cut off. */
.qc-preview__pdf {
    display: block;
    overflow: auto;
    padding: 1rem;
}

/* The page is the document's own paper — white in both themes, as a photo
   keeps its colours: media, not chrome. */
.qc-preview__page {
    display: block;
    margin: 0 auto 1rem;
    background-color: #fff;
    box-shadow: var(--qc-shadow-md);
}
.qc-preview__page:last-child {
    margin-bottom: 0;
}

.qc-preview__fallback .empty-icon .ti {
    font-size: 3rem;
    color: var(--qc-text-tertiary);
}

.qc-preview__fallback .empty-title {
    max-width: 32rem;
    overflow-wrap: anywhere;
}

/* ------------------------------------------------------------------ *
 * The phone: the whole screen
 * ------------------------------------------------------------------ */
@media (max-width: 575.98px) {
    .qc-preview__dialog {
        max-width: none;
        margin: 0;
        min-height: 100%;
    }
    .qc-preview .modal-content {
        min-height: 100dvh;
        border-radius: 0;
    }
    .qc-preview__body {
        flex: 1 1 auto;
        height: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .qc-preview.modal.fade .modal-dialog {
        transition: none;
    }
}