/* Попередній перегляд файлу — FilePreviewPage (modal-size-extra-large file-preview-fullscreen-modal) у Creatio 8.
   Вікно 936×765 по центру (1440×900: x 252, y 68), радіус 8; заголовок 36 (padding 4 8 0, 500 16/20 #181818 по центру, «×» 28×24);
   тіло — поля 8 з боків, переглядач 920×708; підвал 18. Сторінка під вікном притлумлена. */
.fp-veil { position: fixed; inset: 0; z-index: 2500; display: flex; align-items: center; justify-content: center; background: rgba(215, 205, 230, .5); }
.fp-dlg { width: min(936px, calc(100vw - 32px)); height: min(765px, calc(100vh - 32px)); background: #fff; border-radius: 8px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 11px 15px -7px rgba(0,0,0,.2), 0 24px 38px 3px rgba(0,0,0,.14), 0 9px 46px 8px rgba(0,0,0,.12); font-family: var(--c-font); }
.fp-head { flex: none; height: 36px; box-sizing: border-box; padding: 4px 8px 0; display: grid; grid-template-columns: 224px 1fr 224px; gap: 8px; align-items: center; }
.fp-hs.r { display: flex; justify-content: flex-end; }
.fp-title { font: 500 16px/20px var(--c-font); color: #181818; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fp-x { width: 28px; height: 24px; border: 0; border-radius: 4px; background: transparent; color: #0d2e4e; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.fp-x:hover { background: rgba(13,46,78,.06); }
.fp-body { flex: 1; min-height: 0; padding: 0 8px; margin-top: 2px; display: flex; }
.fp-foot { flex: none; height: 18px; margin-top: 1px; }
/* переглядач (App: фон #f1f3f5, текст #343a40, 13px) */
.fp-app { flex: 1; min-width: 0; display: flex; flex-direction: column; background: #f1f3f5; color: #343a40; font: 13px Lato, var(--c-font); }
.fp-bar { flex: none; height: 49px; box-sizing: border-box; background: #fff; border-bottom: 1px solid #cfd4da; display: flex; align-items: center; padding: 0 12px; gap: 0; }
.fp-b { width: 32px; height: 32px; border: 0; border-radius: 4px; background: transparent; color: #343a40; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; flex: none; }
.fp-b:hover:not(:disabled) { background: #e7ebee; }
.fp-b.on { background: #f1f3f5; }
.fp-b:disabled { opacity: .4; cursor: default; }
.fp-b.sm { width: 24px; }
.fp-div { width: 1px; height: 24px; background: #cfd4da; margin: 0 12px; flex: none; }
.fp-sp { flex: 1; }
.fp-rel { position: relative; display: inline-flex; align-items: center; }
.fp-b.ml12 { margin-left: 12px; }
.fp-div.w13 { margin: 0 13px; }
/* масштаб: поле 40 (x +27 від кнопки), стрілка 32 через 10, далі «−» і «+» (позиції як у панелі Apryse у Creatio) */
.fp-zoom { margin: 0 0 0 27px; }
.fp-zoom .fp-b.zt { margin-left: 10px; }
.fp-zin { width: 40px; border: 0; background: transparent; font: 700 13px Lato, var(--c-font); color: #343a40; text-align: right; padding: 0 2px; outline: none; }
.fp-zin:focus { box-shadow: 0 0 0 1px #3183c8; border-radius: 4px; }
.fp-dd { position: absolute; top: 36px; left: 0; z-index: 5; min-width: 180px; background: #fff; border-radius: 4px; padding: 4px 0; box-shadow: 0 0 3px rgba(0,0,0,.2), 0 4px 12px rgba(0,0,0,.15); display: flex; flex-direction: column; }
.fp-dd button { height: 32px; border: 0; background: transparent; text-align: left; padding: 0 12px; font: 13px Lato, var(--c-font); color: #343a40; cursor: pointer; display: flex; align-items: center; gap: 8px; }
.fp-dd button:hover, .fp-dd button.on { background: #e7ebee; }
.fp-dd i { height: 1px; background: #cfd4da; margin: 4px 0; }
.fp-dd.z { left: -20px; min-width: 150px; }
.fp-search { display: flex; align-items: center; gap: 4px; margin-right: 6px; }
.fp-sin { width: 200px; height: 28px; box-sizing: border-box; border: 1px solid #ced4da; border-radius: 4px; padding: 0 8px; font: 13px Lato, var(--c-font); color: #343a40; outline: none; }
.fp-sin:focus { border-color: #3183c8; }
.fp-cnt { min-width: 38px; text-align: center; font-size: 12px; color: #868e96; }
.fp-main { flex: 1; min-height: 0; position: relative; display: flex; }
.fp-area { flex: 1; min-width: 0; overflow: auto; position: relative; }
.fp-area.pan { cursor: grab; user-select: none; }
.fp-area.pan:active { cursor: grabbing; }
.fp-doc { padding: 3px 0 60px; display: flex; flex-direction: column; align-items: safe center; gap: 8px; min-height: 100%; box-sizing: border-box; }
.fp-page { position: relative; background: #fff; flex: none; box-shadow: rgba(0,0,0,.14) 0 0 2px 0, rgba(0,0,0,.12) 0 2px 2px 0, rgba(0,0,0,.12) 0 1px 3px 0; }
.fp-page canvas { display: block; }
.fp-page .textLayer { position: absolute; inset: 0; }
.fp-area.pan .textLayer { pointer-events: none; }
mark.fp-hl { background: rgba(255, 205, 69, .55); color: inherit; padding: 0; border-radius: 1px; }
mark.fp-hl.cur { background: rgba(255, 140, 0, .6); }
.fp-page .textLayer mark.fp-hl { color: transparent; }
/* Word: сторінки docx-preview на сірому фоні з тінню, як сторінки PDF */
.fp-doc.docx { display: block; }
.fp-doc.docx .docx-wrapper { background: transparent !important; padding: 0 !important; display: flex; flex-direction: column; align-items: safe center; gap: 8px; }
.fp-doc.docx .docx-wrapper > section.docx { margin: 0 !important; box-shadow: rgba(0,0,0,.14) 0 0 2px 0, rgba(0,0,0,.12) 0 2px 2px 0, rgba(0,0,0,.12) 0 1px 3px 0 !important; }
.fp-doc.xlsx { display: block; padding: 0 0 40px; }
.fp-sheet { display: inline-block; min-width: 100%; background: #fff; }
.fp-sheet table { border-collapse: collapse; font: 13px Calibri, Arial, sans-serif; color: #000; }
.fp-sheet td, .fp-sheet th { border: 1px solid #e1e1e1; padding: 2px 6px; white-space: nowrap; min-width: 40px; height: 20px; }
.fp-doc.img { justify-content: center; min-height: 100%; padding: 3px 0; }
.fp-img { display: block; flex: none; background: #fff; box-shadow: rgba(0,0,0,.14) 0 0 2px 0, rgba(0,0,0,.12) 0 2px 2px 0; }
.fp-doc.video { justify-content: center; padding: 12px; }
.fp-video { max-width: 100%; max-height: 100%; background: #000; }
.fp-doc.text { align-items: stretch; padding: 12px; }
.fp-text { margin: 0 auto; max-width: 820px; width: 100%; box-sizing: border-box; background: #fff; padding: 24px; white-space: pre-wrap; font: 13px/1.5 Menlo, Consolas, monospace; color: #212529; box-shadow: rgba(0,0,0,.14) 0 0 2px 0, rgba(0,0,0,.12) 0 2px 2px 0; }
.fp-load { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.fp-spin { width: 32px; height: 32px; border: 3px solid #d9dee3; border-top-color: #3183c8; border-radius: 50%; animation: fp-rot .8s linear infinite; }
@keyframes fp-rot { to { transform: rotate(360deg); } }
.fp-err { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; font-size: 14px; color: #495057; }
.fp-dl { height: 32px; padding: 0 16px; border: 0; border-radius: 4px; background: #004fd6; color: #fff; font: 500 14px var(--c-font); cursor: pointer; }
/* навігація сторінками (PageNavOverlay): внизу по центру */
.fp-pager { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); display: flex; align-items: center; gap: 4px; padding: 4px 8px; background: #fff; border-radius: 4px; box-shadow: 0 0 3px rgba(0,0,0,.2), 0 2px 6px rgba(0,0,0,.12); }
.fp-pin { width: 32px; height: 32px; box-sizing: border-box; border: 1px solid #818a94; border-radius: 4px; text-align: center; font: 700 13px Lato, var(--c-font); color: #343a40; outline: none; }
.fp-pof { padding: 0 4px; font: 13px Lato, var(--c-font); }
/* ліва панель: мініатюри сторінок / аркуші книги */
.fp-side { width: 196px; flex: none; overflow: auto; background: #fff; border-right: 1px solid #cfd4da; padding: 12px 0; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.fp-th { cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 4px; border-radius: 4px; }
.fp-th.on { background: #e7ebee; }
.fp-th-img { width: 140px; min-height: 60px; background: #fff; box-shadow: 0 0 2px rgba(0,0,0,.2); }
.fp-th-img canvas { display: block; }
.fp-th-n { font-size: 12px; }
.fp-side.sheets { align-items: stretch; gap: 0; padding: 8px 0; }
.fp-sh { padding: 8px 16px; cursor: pointer; }
.fp-sh.on, .fp-sh:hover { background: #e7ebee; }
.fp-tabs { position: absolute; left: 0; right: 0; bottom: 0; height: 32px; display: flex; gap: 2px; padding: 0 8px; background: #fff; border-top: 1px solid #cfd4da; overflow-x: auto; }
.fp-tabs button { border: 0; background: transparent; padding: 0 12px; font: 13px Lato, var(--c-font); color: #343a40; cursor: pointer; border-bottom: 2px solid transparent; }
.fp-tabs button.on { border-bottom-color: #3183c8; font-weight: 700; }