/* Shared document viewer (DocumentViewerDialog).
   Scoped .razor.css is not loaded in this app — see App.razor — so these live here. */

.dv-root {
    display: flex;
    flex-direction: column;
    width: 100%;
    background: #fff;
}

/* Dialog mode fills the Radzen dialog; inline mode sits in a page column. */
.dv-root.dv-dialog {
    height: calc(90vh - 60px);
    min-height: 480px;
}

.dv-root.dv-inline {
    height: 100%;
    min-height: 420px;
    border: 1px solid #dfe5f0;
    border-radius: 10px;
    overflow: hidden;
}

.dv-toolbar {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 0.75rem;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-bottom: 1px solid #dee2e6;
    flex-shrink: 0;
    flex-wrap: wrap;
}

.dv-title {
    font-weight: 600;
    color: #495057;
    margin-right: 0.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 40%;
}

.dv-spacer { flex: 1 1 auto; }

.dv-pageinfo {
    font-variant-numeric: tabular-nums;
    color: #495057;
    padding: 0 0.35rem;
    white-space: nowrap;
}

.dv-zoom {
    font-variant-numeric: tabular-nums;
    color: #6c757d;
    min-width: 3.2rem;
    text-align: center;
}

/* The scroll container. Its child is the page stack the JS module fills. */
.dv-scroller {
    flex: 1 1 auto;
    overflow: auto;
    background: #525659;
    padding: 12px;
    position: relative;
}

.dv-pages { margin: 0 auto; width: max-content; }

.dv-page {
    position: relative;
    margin: 0 auto 12px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
}

.dv-canvas { display: block; }

/* Non-PDF bodies */
.dv-image-wrap {
    flex: 1 1 auto;
    overflow: auto;
    background: #525659;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
}

.dv-image { max-width: 100%; max-height: 100%; box-shadow: 0 2px 8px rgba(0, 0, 0, .35); }

.dv-html-frame { flex: 1 1 auto; width: 100%; border: none; background: #fff; }

/* States */
.dv-state {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 2rem;
    text-align: center;
    background: #525659;
    color: #fff;
}

.dv-state.dv-state-light { background: #fff; color: #495057; }

.dv-state .dv-state-detail { color: #adb5bd; max-width: 34rem; }
.dv-state.dv-state-light .dv-state-detail { color: #6c757d; }

.dv-state-icon { font-size: 2.5rem; opacity: .85; }

@media (max-width: 720px) {
    .dv-title { max-width: 100%; }
    .dv-toolbar { gap: 0.25rem; }
}

/* Shown over the page stack while a document opens — the container must stay mounted, because
   the JS module renders into it and holds an element reference to it. */
.dv-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    background: #525659;
    color: #fff;
    z-index: 2;
}