/*
* PDFRaj Engine — proprietary.
* Copyright (c) 2026 Aditya Raj. All rights reserved.
* Author: Aditya Raj. Unauthorized copying, distribution, or resale of this
* source, in whole or in part, is prohibited.
*/
/*
* PDFPro — Page Studio / workspace styling (Phase 5A.1).
* Reuses the shared design tokens defined in pdfraj-app.css
* (--pdfraj-border, --pdfraj-accent, --pdfraj-muted, --pdfraj-radius*, etc.).
*/
.pdfraj-workspace-mount {
margin-top: var(--pdfraj-sp-4);
}
/* Once files are loaded, the tiles/pages sit on a soft gray workspace band
* (Sejda-style). For multi-file tools the big upload band is replaced by the
* toolbar's "Add files" button. */
.pdfraj-app.pdfraj-has-files .pdfraj-workspace-mount {
/* The bars cancel this to run edge to edge; everything else keeps the inset. */
--ps-pad: 1.75rem;
background: var(--pdfraj-canvas);
/* Square at the top: the toolbar band butts against the document header the
* way Smallpdf's does. A 1.25rem gap plus a rounded corner made the bar look
* like a card floating on a canvas rather than part of the workspace. */
border-radius: 0 0 var(--pdfraj-r-lg) var(--pdfraj-r-lg);
padding: 0 var(--ps-pad) var(--ps-pad);
margin-top: 0;
}
.pdfraj-app.pdfraj-has-files[data-ws-layout="multi"] .pdfraj-dropzone { display: none; }
/* Workspace toolbar: Add files (multi) + thumbnail zoom. */
/* Full-bleed band, flush under the document header. The negative inline margin
* cancels the mount's padding; the matching inline padding puts the controls back
* where the grid's left edge is, so nothing looks shifted. */
.ps-toolbar {
display: flex; align-items: center; gap: var(--pdfraj-sp-4); flex-wrap: wrap;
margin: 0 calc(-1 * var(--ps-pad, 0px));
padding: var(--pdfraj-sp-3) var(--ps-pad, 0px);
background: #fff;
border-bottom: 1px solid var(--pdfraj-bd);
}
.ps-toolbar[hidden] { display: none; }
/* ONE control height for the whole bar. 40px and 32px controls used to sit side
* by side, which is most of why the row read as unfinished next to Smallpdf's. */
.ps-bar { --ps-bar-h: 36px; column-gap: var(--pdfraj-sp-3); row-gap: var(--pdfraj-sp-2); }
.ps-bar-group { display: inline-flex; align-items: center; gap: var(--pdfraj-sp-2); }
/* The view slot is pinned right on EVERY tool, so sort / list-grid / zoom land in
* the same place whether the left slots are full (Merge) or empty (Protect). */
.ps-bar-view { margin-left: auto; }
.ps-bar-group:empty { display: none; }
/* The view cluster moves to the selection row on tools that have one, so its
* sizing has to travel with it rather than live under .ps-bar. */
.ps-bar-view { --ps-bar-h: 36px; }
/* Reset also pushes itself right with margin-left:auto. With the view cluster on
* the same row both autos split the free space and the cluster floated in the
* middle, so Reset joins the count on the left and the cluster alone takes the
* right edge -- which is where it sits on every other tool. */
.ps-selbar--withview .ps-reset-btn { margin-left: 0; }
.ps-bar .ps-tool-btn,
.ps-bar .ps-icon-btn,
.ps-bar .ps-viewtoggle,
.ps-bar .ps-zoom,
.ps-bar-view .ps-tool-btn,
.ps-bar-view .ps-viewtoggle,
.ps-bar-view .ps-zoom { height: var(--ps-bar-h); box-sizing: border-box; }
/* With the cluster gone from this bar, the multi-file CTA takes the right end. */
.ps-bar .ps-cta { margin-left: auto; }
.ps-bar .ps-icon-btn { width: var(--ps-bar-h); justify-content: center; }
/* display:inline-flex beats the hidden attribute's UA display:none, so anything
* in the bar that is shown conditionally needs this said out loud. */
.ps-bar .ps-icon-btn[hidden],
.ps-doc-chip[hidden],
.ps-sel-chip[hidden] { display: none; }
/* The left anchor on tools with no Files/Pages toggle -- same height and the
* same slot, so the row never starts in a different place from one tool to the
* next. Quiet by design: it reports, it is not a control. */
.ps-doc-chip {
display: inline-flex; align-items: center; height: var(--ps-bar-h);
padding: 0 13px; border: 1px solid var(--pdfraj-bd); border-radius: var(--pdfraj-r-md);
background: #fff; box-shadow: var(--pdfraj-sh-sm);
font-size: var(--pdfraj-fs-base); font-weight: 600; color: var(--pdfraj-text-muted);
font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* The selection count, next to the controls that act on it. */
.ps-sel-chip {
display: inline-flex; align-items: center; height: var(--ps-bar-h);
padding: 0 12px; border: 1px solid #c7dbff; border-radius: var(--pdfraj-r-md);
background: var(--pdfraj-accent-soft); color: var(--pdfraj-accent);
font-size: var(--pdfraj-fs-base); font-weight: 600;
font-variant-numeric: tabular-nums; white-space: nowrap; margin-left: var(--pdfraj-sp-1);
}
.ps-tool-btn {
display: inline-flex; align-items: center; gap: var(--pdfraj-sp-2);
background: #fff; color: var(--pdfraj-accent);
border: 1px solid var(--pdfraj-accent); border-radius: var(--pdfraj-r-sm);
padding: var(--pdfraj-sp-2) var(--pdfraj-sp-4);
font: inherit; font-weight: 600; font-size: var(--pdfraj-fs-base);
cursor: pointer; transition: background-color var(--pdfraj-ws-ease);
}
.ps-tool-btn:hover { background: var(--pdfraj-accent-soft); }
/* Premium zoom control: a white pill with flat +/- buttons and a refined accent
* slider (custom track + thumb), replacing the raw browser range — same pill
* language as the grid/list toggle so every tool's toolbar reads as one product. */
.ps-zoom {
display: inline-flex; align-items: center; gap: 4px;
background: #fff; border: 1px solid var(--pdfraj-bd); border-radius: var(--pdfraj-r-pill);
padding: 3px 6px; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}
.ps-zoom-btn {
width: 26px; height: 26px; padding: 0; border: 0; background: transparent;
border-radius: 50%; color: var(--pdfraj-text-muted);
font-size: 17px; line-height: 1; cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
transition: background var(--pdfraj-ws-ease), color var(--pdfraj-ws-ease);
}
.ps-zoom-btn:hover { background: var(--pdfraj-accent-soft); color: var(--pdfraj-accent); }
/* A bare slider gives no idea what it is set to. tabular-nums so the readout
* does not jitter between 90% and 100% as you drag. */
.ps-zoom-pct {
font-size: var(--pdfraj-fs-sm); font-weight: 600; color: var(--pdfraj-text-muted);
font-variant-numeric: tabular-nums; min-width: 34px; text-align: right; padding-right: 2px;
}
.ps-zoom-range {
-webkit-appearance: none; appearance: none; width: 68px; height: 4px; margin: 0 2px;
background: #dfe3ec; border-radius: var(--pdfraj-r-pill); cursor: pointer;
}
.ps-zoom-range::-webkit-slider-runnable-track { height: 4px; border-radius: var(--pdfraj-r-pill); background: transparent; }
.ps-zoom-range::-webkit-slider-thumb {
-webkit-appearance: none; width: 15px; height: 15px; margin-top: -5.5px;
border-radius: 50%; background: var(--pdfraj-accent); border: 2px solid #fff;
box-shadow: 0 1px 3px rgba(37, 99, 235, 0.45); cursor: pointer;
}
.ps-zoom-range::-moz-range-track { height: 4px; border-radius: var(--pdfraj-r-pill); background: #dfe3ec; }
.ps-zoom-range::-moz-range-thumb {
width: 15px; height: 15px; border-radius: 50%; background: var(--pdfraj-accent);
border: 2px solid #fff; box-shadow: 0 1px 3px rgba(37, 99, 235, 0.45); cursor: pointer;
}
/* Grid of page cards (single) or document tiles (multi). Column width is
* driven by the zoom slider (--ps-thumb-w). */
.ps-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(var(--ps-thumb-w, 160px), 1fr));
gap: var(--pdfraj-sp-4);
align-items: start;
position: relative; /* anchor for the marquee select box */
}
.ps-grid-multi { --ps-thumb-w: 200px; }
.ps-grid.ps-locked {
opacity: 0.6;
pointer-events: none;
}
.ps-grid:empty {
display: none;
}
/* ---- Page card (single layout) ---- */
.ps-card {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--pdfraj-sp-2);
padding: var(--pdfraj-sp-2) var(--pdfraj-sp-2) var(--pdfraj-sp-3);
border: 1px solid var(--pdfraj-bd);
border-radius: var(--pdfraj-r-sm);
background: var(--pdfraj-paper, #fff);
cursor: grab;
transition: box-shadow var(--pdfraj-ws-ease), border-color var(--pdfraj-ws-ease), transform var(--pdfraj-ws-ease);
}
.ps-card:hover {
border-color: var(--pdfraj-accent);
box-shadow: var(--pdfraj-sh-md);
}
/* Stand-in for a file pdf.js cannot open, on tools where that is legitimate
* input (Repair). Not draggable and not interactive — it represents an
* unreadable document, so it must not look like a page card you can act on. */
.ps-card-damaged {
cursor: default;
justify-content: center;
min-height: 190px;
gap: var(--pdfraj-sp-1);
border-style: dashed;
background: #fbfbfd;
text-align: center;
}
.ps-card-damaged:hover { border-color: var(--pdfraj-bd); box-shadow: none; }
.ps-damaged-box { color: #9a97a8; line-height: 0; margin-bottom: var(--pdfraj-sp-1); }
.ps-damaged-title {
font-size: var(--pdfraj-fs-sm); font-weight: 600; color: #3f3d4d;
max-width: 100%; padding: 0 var(--pdfraj-sp-2);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ps-damaged-sub { font-size: var(--pdfraj-fs-xs); color: #6b7280; padding: 0 var(--pdfraj-sp-2); }
.ps-card:focus-visible {
outline: 2px solid var(--pdfraj-accent);
outline-offset: 2px;
}
.ps-card.ps-dragging,
.ps-doc.ps-dragging {
opacity: 0.5;
cursor: grabbing;
}
.ps-card.ps-deleted {
opacity: 0.45;
filter: grayscale(1);
}
.ps-card.ps-deleted .ps-thumb {
outline: 2px dashed var(--pdfraj-danger);
outline-offset: -2px;
}
/* Thumbnail surface. */
.ps-thumb {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 120px;
background: #f3f4f6;
border-radius: var(--pdfraj-r-sm);
overflow: hidden;
transform-origin: center center;
}
.ps-thumb canvas {
display: block;
width: 100%; /* fill the tile so the preview is large, not a tiny strip */
height: auto;
}
.ps-page-num {
position: absolute;
bottom: 4px;
right: 4px;
min-width: 1.4em;
padding: 0 0.35em;
font-size: var(--pdfraj-fs-xs);
line-height: 1.5;
text-align: center;
color: #fff;
background: rgba(17, 24, 39, 0.72);
border-radius: var(--pdfraj-r-pill);
}
/* Per-card tool buttons. */
.ps-card-tools {
display: flex;
gap: var(--pdfraj-sp-2);
justify-content: center;
}
.ps-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
padding: 0;
color: var(--pdfraj-text-muted);
background: transparent;
border: 0;
border-radius: var(--pdfraj-r-sm);
cursor: pointer;
}
.ps-btn:hover {
background: var(--pdfraj-accent-soft);
color: var(--pdfraj-accent);
}
.ps-btn-delete:hover,
.ps-btn-remove:hover {
background: #fdeaea;
color: var(--pdfraj-danger);
}
/* ---- Document tile (multi layout) — Sejda Files-view style:
* a large page preview (paper look) with a hover remove button and the
* filename + page count as a caption below. No heavy bordered card. ---- */
.ps-doc {
display: flex;
flex-direction: column;
gap: var(--pdfraj-sp-2);
background: transparent;
border: 0;
padding: 0;
cursor: grab;
}
.ps-doc:focus-visible {
outline: 2px solid var(--pdfraj-accent);
outline-offset: 3px;
border-radius: var(--pdfraj-r-sm);
}
.ps-doc-thumb-wrap { position: relative; }
.ps-doc .ps-thumb {
background: #fff;
border: 1px solid var(--pdfraj-bd);
border-radius: var(--pdfraj-r-sm);
box-shadow: var(--pdfraj-sh-sm);
min-height: 200px; /* visible paper box while the preview renders */
align-items: stretch;
transition: box-shadow var(--pdfraj-ws-ease);
}
.ps-doc:hover .ps-thumb { box-shadow: var(--pdfraj-sh-md); border-color: var(--pdfraj-accent); }
.ps-doc-remove {
position: absolute; top: 6px; right: 6px;
width: 26px; height: 26px;
opacity: 0;
background: #fff;
box-shadow: var(--pdfraj-sh-md);
transition: opacity var(--pdfraj-ws-ease);
}
.ps-doc:hover .ps-doc-remove,
.ps-doc:focus-within .ps-doc-remove { opacity: 1; }
.ps-doc-caption {
display: flex; flex-direction: column; align-items: center; gap: 0.2rem;
text-align: center;
}
.ps-doc-name {
max-width: 100%;
font-size: var(--pdfraj-fs-sm); font-weight: 600;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ps-doc-meta { font-size: var(--pdfraj-fs-xs); color: var(--pdfraj-text-muted); }
/* Per-file page order (Alternate Mix). The control is in the side panel; this
is the tile's read-back of it, so the grid and the panel never disagree. */
.ps-doc-order {
display: inline-block; margin-top: 3px; padding: 1px var(--pdfraj-sp-2);
border-radius: var(--pdfraj-r-sm); background: #eef2fc; color: #4a5675;
font-size: var(--pdfraj-fs-xs); font-weight: 600;
}
.ps-doc-order-rev { background: #fdeee4; color: #9a5420; }
/* Advanced disclosure: read-only textual mirror of what will be submitted. */
.ps-advanced {
margin-top: var(--pdfraj-sp-4);
}
.ps-advanced > summary {
cursor: pointer;
font-size: var(--pdfraj-fs-base);
color: var(--pdfraj-text-muted);
}
.ps-advanced-summary {
margin-top: var(--pdfraj-sp-2);
padding: var(--pdfraj-sp-2) var(--pdfraj-sp-3);
font-size: var(--pdfraj-fs-sm);
color: var(--pdfraj-text);
background: var(--pdfraj-bg, #f9fafb);
border: 1px solid var(--pdfraj-bd);
border-radius: var(--pdfraj-r-sm);
word-break: break-word;
}
.ps-hint {
margin: var(--pdfraj-sp-2) 0 0;
font-size: var(--pdfraj-fs-sm);
color: var(--pdfraj-text-muted);
}
/* ---- Reorder dropdown (toolbar) ---- */
.ps-reorder { position: relative; }
.ps-caret { font-size: var(--pdfraj-fs-xs); margin-left: 0.1rem; }
.ps-reorder-menu {
position: absolute; top: calc(100% + 4px); left: 0; z-index: 5;
background: #fff; border: 1px solid var(--pdfraj-bd); border-radius: var(--pdfraj-r-md);
box-shadow: var(--pdfraj-shadow-pop, 0 6px 16px rgba(0,0,0,0.12));
min-width: 190px; padding: var(--pdfraj-sp-1);
}
.ps-reorder-menu[hidden] { display: none; }
.ps-reorder-menu button {
display: block; width: 100%; text-align: left;
background: none; border: 0; padding: var(--pdfraj-sp-2) var(--pdfraj-sp-2); border-radius: var(--pdfraj-r-sm);
font: inherit; font-size: var(--pdfraj-fs-base); color: var(--pdfraj-text); cursor: pointer;
}
.ps-reorder-menu button:hover { background: var(--pdfraj-accent-soft); color: var(--pdfraj-accent); }
/* ---- "More options" panel (Sejda layout, brand-green tint) ---- */
.pdfraj-app:not(.pdfraj-has-files) .ps-moreopts { display: none; }
.ps-moreopts {
max-width: 660px; margin: 1.5rem auto 0;
border: 1px solid var(--pdfraj-bd); border-radius: var(--pdfraj-r-lg);
background: var(--pdfraj-accent-soft);
overflow: hidden;
}
.ps-moreopts > summary {
cursor: pointer; list-style: none;
padding: var(--pdfraj-sp-3) var(--pdfraj-sp-4); font-weight: 600; color: var(--pdfraj-accent);
text-align: center;
}
.ps-moreopts > summary::-webkit-details-marker { display: none; }
.ps-moreopts > summary::after { content: " \25BE"; }
.ps-moreopts[open] > summary::after { content: " \25B4"; }
.ps-moreopts-body { padding: var(--pdfraj-sp-2) var(--pdfraj-sp-5) var(--pdfraj-sp-5); }
.ps-optgroup { border: 0; margin: 0 0 1.3rem; padding: 0; text-align: center; }
.ps-optgroup:last-child { margin-bottom: 0; }
.ps-optgroup legend {
width: 100%; text-align: center; float: none;
font-weight: 700; font-size: var(--pdfraj-fs-md); margin-bottom: var(--pdfraj-sp-3);
}
.ps-check {
display: flex; align-items: center; gap: var(--pdfraj-sp-2);
max-width: 320px; margin: 0.4rem auto;
}
.ps-check input { accent-color: var(--pdfraj-accent); width: 16px; height: 16px; flex-shrink: 0; }
.ps-check span { font-size: var(--pdfraj-fs-md); }
/* Segmented control */
.ps-segment { display: inline-flex; flex-wrap: wrap; justify-content: center; }
.ps-segment label { position: relative; }
.ps-segment input { position: absolute; opacity: 0; pointer-events: none; }
.ps-segment span {
display: inline-block; padding: var(--pdfraj-sp-2) var(--pdfraj-sp-3);
font-size: var(--pdfraj-fs-base); background: #fff;
border: 1px solid var(--pdfraj-bd); margin-left: -1px;
cursor: pointer;
}
.ps-segment label:first-child span { border-radius: var(--pdfraj-r-sm) 0 0 var(--pdfraj-r-sm); margin-left: 0; }
.ps-segment label:last-child span { border-radius: 0 var(--pdfraj-r-sm) var(--pdfraj-r-sm) 0; }
.ps-segment input:checked + span {
background: #fff; border-color: var(--pdfraj-accent);
color: var(--pdfraj-accent); font-weight: 600; z-index: 1;
box-shadow: inset 0 0 0 1px var(--pdfraj-accent);
}
.ps-segment input:focus-visible + span { outline: 2px solid var(--pdfraj-accent); outline-offset: 1px; }
/* The segmented control is defined ONCE, further down. It used to be declared
* here as a bordered box and again at "Files / Pages: a clean pill segmented
* control" as a pill — the second quietly won, so this block only ever confused
* whoever read it first. */
/* ---- List view (single layout) — compact rows, smallpdf-style ---- */
/* List view was a 760px column of separate little cards with a 54px thumbnail,
* which on a 965px workspace looked like a narrow strip of nothing. One full-width
* surface, rows divided by hairlines, and a thumbnail big enough to recognise a
* page by. */
/* The ROWS form the card, not the container. When the container carried the box,
* the "Add PDF or image files" tile was swallowed into it and closed off at the
* bottom -- on Smallpdf that dropzone sits open, below the rows. Rows own their
* own edges, so anything else in the grid stays outside the card. */
.ps-grid.ps-list {
grid-template-columns: 1fr;
gap: 0;
max-width: none;
margin-inline: 0;
background: transparent;
border: 0;
border-radius: 0;
overflow: visible;
}
.ps-grid.ps-list .ps-card {
flex-direction: row;
align-items: center;
gap: var(--pdfraj-sp-4);
padding: var(--pdfraj-sp-3) var(--pdfraj-sp-4);
background: #fff;
border: 1px solid var(--pdfraj-bd);
border-top: 0;
border-radius: 0;
box-shadow: none;
cursor: pointer;
}
.ps-grid.ps-list .ps-card + .ps-card { border-top: 1px solid var(--pdfraj-rule, #eef0f5); }
.ps-grid.ps-list .ps-card:first-of-type {
border-top: 1px solid var(--pdfraj-bd);
border-radius: var(--pdfraj-r-md) var(--pdfraj-r-md) 0 0;
}
/* The last ROW closes the card -- :last-child would be the add tile. */
.ps-grid.ps-list .ps-card:not(:has(~ .ps-card)) { border-radius: 0 0 var(--pdfraj-r-md) var(--pdfraj-r-md); }
.ps-grid.ps-list .ps-card:hover { background: #fafbfd; }
.ps-grid.ps-list .ps-thumb {
flex: 0 0 64px;
width: 64px;
min-width: 64px;
min-height: 84px;
max-height: 84px;
}
.ps-list-label { display: none; }
.ps-grid.ps-list .ps-list-label {
display: flex; flex-direction: column; gap: 2px;
flex: 1 1 auto; min-width: 0;
}
.ps-list-file {
font-size: var(--pdfraj-fs-md); font-weight: 600; color: var(--pdfraj-text);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.ps-list-sub { font-size: var(--pdfraj-fs-sm); color: var(--pdfraj-text-muted); }
.ps-grid.ps-list .ps-card-tools { margin-left: auto; }
/* Files-view list rows (Smallpdf-style). The .ps-card rules above cover the
* Pages view; the FILES view tiles are .ps-doc, which previously stayed in their
* vertical grid-card layout inside the single-column list — thumb on top, caption
* centered below, lots of dead space. Make each a full-width, centered row card:
* checkbox left, small thumb, name + "N pages" beside it, action tools pinned
* right. The container (.ps-grid.ps-list) is already max-width 760 + margin auto. */
.ps-grid.ps-list .ps-doc {
position: relative;
flex-direction: row;
align-items: center;
gap: var(--pdfraj-sp-3);
padding: var(--pdfraj-sp-3) var(--pdfraj-sp-4);
padding-left: 44px; /* room for the left-pinned checkbox */
padding-right: 140px; /* room for the right-pinned tools */
background: #fff;
border: 1px solid var(--pdfraj-bd);
border-radius: var(--pdfraj-r-md);
box-shadow: none;
}
.ps-grid.ps-list .ps-doc:hover { border-color: var(--pdfraj-bd-strong); box-shadow: var(--pdfraj-sh-sm); }
/* Thumb static (so the tools/checkbox anchor to the ROW, not the 50px thumb). */
.ps-grid.ps-list .ps-doc-thumb-wrap { position: static; flex: 0 0 50px; width: 50px; }
.ps-grid.ps-list .ps-thumb { width: 50px; min-width: 50px; min-height: 64px; max-height: 64px; }
.ps-grid.ps-list .ps-doc-caption { flex: 1 1 auto; flex-direction: column; align-items: flex-start; text-align: left; min-width: 0; }
.ps-grid.ps-list .ps-doc-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.ps-grid.ps-list .ps-doc-check { top: 50%; left: var(--pdfraj-sp-4); transform: translateY(-50%); }
/* Tools pinned to the row's right, always visible (Smallpdf parity — no hover). */
.ps-grid.ps-list .ps-thumbtools {
top: 50%; left: auto; right: var(--pdfraj-sp-3); transform: translateY(-50%);
opacity: 1; pointer-events: auto; background: transparent; box-shadow: none; padding: 0;
}
/* ---- Toolbar dropdown ---- */
.ps-dd { position: relative; }
.ps-dd-menu {
position: absolute; top: calc(100% + 4px); left: 0; z-index: 5;
background: #fff; border: 1px solid var(--pdfraj-bd); border-radius: var(--pdfraj-r-md);
box-shadow: var(--pdfraj-shadow-pop, 0 6px 16px rgba(0,0,0,0.12));
min-width: 180px; padding: var(--pdfraj-sp-1);
}
.ps-dd-menu[hidden] { display: none; }
.ps-dd-menu button {
display: block; width: 100%; text-align: left;
background: none; border: 0; padding: var(--pdfraj-sp-2) var(--pdfraj-sp-2); border-radius: var(--pdfraj-r-sm);
font: inherit; font-size: var(--pdfraj-fs-base); color: var(--pdfraj-text); cursor: pointer;
}
.ps-dd-menu button:hover:not(:disabled) { background: var(--pdfraj-accent-soft); color: var(--pdfraj-accent); }
.ps-dd-menu button:disabled { color: var(--pdfraj-text-muted); cursor: default; }
.ps-dd-sep { height: 1px; background: var(--pdfraj-bd); margin: var(--pdfraj-sp-1) 0; }
/* ---- Pages view ---- */
.ps-grid-pages { --ps-thumb-w: 150px; }
.ps-blank-label { color: var(--pdfraj-text-muted); font-size: var(--pdfraj-fs-sm); font-style: italic; }
/* ---- Floating thumbnail hover toolbar (preview / rotate / delete) ---- */
.ps-thumbtools {
position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
display: flex; gap: 0.25rem;
background: #fff; border-radius: var(--pdfraj-r-md);
box-shadow: var(--pdfraj-sh-md);
padding: 0.2rem; z-index: 3;
opacity: 0; pointer-events: none; transition: opacity var(--pdfraj-ws-ease);
}
.ps-card:hover .ps-thumbtools, .ps-card:focus-within .ps-thumbtools,
.ps-doc:hover .ps-thumbtools, .ps-doc:focus-within .ps-thumbtools { opacity: 1; pointer-events: auto; }
.ps-tt-btn {
width: 30px; height: 30px; padding: 0;
display: inline-flex; align-items: center; justify-content: center;
border: 0; background: none; border-radius: var(--pdfraj-r-sm);
color: var(--pdfraj-text-muted); cursor: pointer;
}
.ps-tt-btn:hover { background: var(--pdfraj-accent-soft); color: var(--pdfraj-accent); }
.ps-tt-btn svg, .ps-btn svg { width: 18px; height: 18px; }
/* ---- Preview lightbox ---- */
.ps-lightbox {
position: fixed; inset: 0; z-index: 1000;
background: rgba(15, 23, 42, 0.8);
display: flex; align-items: center; justify-content: center;
}
/* Stage + bar, so the page is centred in the space ABOVE the controls rather
* than in the whole viewport with the bar sitting on top of it. */
.ps-lightbox { flex-direction: column; gap: var(--pdfraj-sp-4); padding: 64px 24px 24px; }
.ps-lightbox-stage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; width: 100%; }
.ps-lightbox-canvas { max-width: 86vw; max-height: 100%; background: #fff; box-shadow: var(--pdfraj-sh-lg); }
/* One pill: page through the document, and the same rotate/delete the tile has. */
.ps-lightbox-bar {
display: inline-flex; align-items: center; gap: var(--pdfraj-sp-1);
flex: 0 0 auto; padding: 6px 8px;
background: #fff; border-radius: var(--pdfraj-r-pill); box-shadow: var(--pdfraj-sh-lg);
}
.ps-lb-btn {
display: inline-flex; align-items: center; justify-content: center;
width: 36px; height: 36px; border: 0; border-radius: 50%;
background: transparent; color: #3a3a55; cursor: pointer;
transition: background var(--pdfraj-ws-ease), color var(--pdfraj-ws-ease);
}
.ps-lb-btn:hover:not(:disabled) { background: var(--pdfraj-accent-soft); color: var(--pdfraj-accent); }
.ps-lb-btn:disabled { color: #c2c7d4; cursor: default; }
.ps-lb-btn[hidden] { display: none; }
.ps-lb-num {
width: 44px; height: 32px; text-align: center; margin: 0 2px;
border: 1px solid var(--pdfraj-bd); border-radius: var(--pdfraj-r-sm);
background: #fff; color: var(--pdfraj-text);
font: inherit; font-size: var(--pdfraj-fs-base); font-weight: 600;
font-variant-numeric: tabular-nums;
}
.ps-lb-num:focus { outline: none; border-color: var(--pdfraj-accent); box-shadow: var(--pdfraj-sh-ring); }
.ps-lb-total {
font-size: var(--pdfraj-fs-base); font-weight: 600; color: var(--pdfraj-text-muted);
font-variant-numeric: tabular-nums; padding-right: 4px; white-space: nowrap;
}
.ps-lb-sep { width: 1px; height: 22px; background: var(--pdfraj-bd); margin: 0 4px; flex: 0 0 auto; }
.ps-lb-sep[hidden] { display: none; }
.ps-lightbox-close {
position: absolute; top: 16px; right: 20px;
width: 40px; height: 40px; border: 0; border-radius: 50%;
background: rgba(255, 255, 255, 0.15); color: #fff; font-size: 1.6rem; line-height: 1; cursor: pointer;
}
.ps-lightbox-close:hover { background: rgba(255, 255, 255, 0.3); }
/* ---- Organize: selection + bulk bar (Phase 10.2) ---- */
/* The second band. Flat, not a card: a bordered white box sitting on the canvas
* under another bordered white box read as two floating panels. */
.ps-selbar {
display: flex;
align-items: center;
gap: var(--pdfraj-sp-3);
min-height: 52px; /* it holds 36px controls now, not just a checkbox */
flex-wrap: wrap;
margin: 0 calc(-1 * var(--ps-pad, 0px));
padding: var(--pdfraj-sp-3) var(--ps-pad, 0px);
border: 0;
border-bottom: 1px solid var(--pdfraj-bd);
border-radius: 0;
background: transparent;
}
.ps-selbar[hidden] { display: none; }
.ps-selbar-left { display: flex; align-items: center; gap: var(--pdfraj-sp-3); }
.ps-selall {
display: inline-flex; align-items: center; gap: var(--pdfraj-sp-2);
font-size: var(--pdfraj-fs-base); font-weight: 600; cursor: pointer; user-select: none;
}
.ps-selall input { width: 16px; height: 16px; accent-color: var(--pdfraj-accent); cursor: pointer; }
.ps-count { font-size: var(--pdfraj-fs-base); color: var(--pdfraj-text-muted); }
/* .ps-bulk / .ps-bulk-btn are gone with the second action row -- those buttons
* duplicated the toolbar icons and only the duplicate ever worked in the pages
* view. Selection now lights up the icons in the bar instead. */
.ps-reset-btn {
margin-left: auto;
padding: var(--pdfraj-sp-1) var(--pdfraj-sp-3);
font-size: var(--pdfraj-fs-base); font-weight: 600;
border: 1px solid transparent; border-radius: var(--pdfraj-r-sm);
background: transparent; color: var(--pdfraj-text-muted); cursor: pointer;
}
.ps-reset-btn:hover { color: var(--pdfraj-danger, #d33); text-decoration: underline; }
/* Selected page card */
.ps-card.ps-selected {
border-color: var(--pdfraj-accent);
box-shadow: var(--pdfraj-sh-selected);
background: var(--pdfraj-accent-soft);
}
.ps-card.ps-selected .ps-thumb { outline: none; }
/* Current page (capabilities.focusPage — Create Bookmarks). Softer than the
* selection state: it marks where the side panel will act, not a multi-select. */
.ps-card.ps-focus {
border-color: var(--pdfraj-accent);
box-shadow: 0 0 0 2px var(--pdfraj-accent);
}
.ps-card.ps-focus .ps-page-num { background: var(--pdfraj-accent); color: #fff; }
/* Marquee (rubber-band) selection box */
.ps-marquee {
position: absolute;
z-index: 5;
border: 1.5px solid var(--pdfraj-accent);
background: color-mix(in srgb, var(--pdfraj-accent) 14%, transparent);
pointer-events: none;
border-radius: var(--pdfraj-r-sm);
}
/* ---- File card for non-PDF inputs (Office converts, Phase 10 W2c) ---- */
.ps-filecard {
position: relative;
display: flex;
align-items: center;
gap: var(--pdfraj-sp-3);
max-width: 460px;
padding: var(--pdfraj-sp-4) var(--pdfraj-sp-4);
border: 1px solid var(--pdfraj-bd);
border-radius: var(--pdfraj-r-sm);
background: var(--pdfraj-paper, #fff);
}
.ps-filecard-ext {
flex: 0 0 auto;
display: inline-flex; align-items: center; justify-content: center;
width: 50px; height: 60px;
font-size: var(--pdfraj-fs-xs); font-weight: 700; letter-spacing: 0.02em;
color: #fff; background: var(--pdfraj-accent);
border-radius: var(--pdfraj-r-sm);
}
.ps-filecard-meta { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.ps-filecard-name {
font-size: var(--pdfraj-fs-md); font-weight: 600; color: var(--pdfraj-text);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 320px;
}
.ps-filecard-size { font-size: var(--pdfraj-fs-sm); color: var(--pdfraj-text-muted); }
.ps-filecard-rm {
position: absolute; top: 8px; right: 8px;
width: 24px; height: 24px; padding: 0; line-height: 1;
border: 1px solid var(--pdfraj-bd); border-radius: 50%;
background: #fff; color: var(--pdfraj-text-muted); font-size: var(--pdfraj-fs-md); cursor: pointer;
}
.ps-filecard-rm:hover { border-color: var(--pdfraj-danger, #d33); color: var(--pdfraj-danger, #d33); }
/* Image tile thumbnail (jpg-to-pdf, Phase 10 W2d) */
.ps-doc-img { display: block; width: 100%; height: auto; max-height: 240px; object-fit: contain; background: #fff; border-radius: var(--pdfraj-r-sm); }
/* ===== Workspace polish (Smallpdf-match): unify accent to blue, lighter =====
* The page-studio (Merge / Organize / converts) used brand green while the
* shell + Compress use blue. Scope a blue accent to the workspace app so every
* tool's workspace matches; marketing pages keep brand green. */
/* ===========================================================================
* WORKSPACE DESIGN SYSTEM — single source of truth (Phase 11 polish).
* Scoped to .pdfraj-app so the landing's green/warm :root is untouched.
* Every workspace component (.pe-ws-*, .ps-*) consumes these tokens — no
* hardcoded accents / radii / shadows / type sizes / control heights below.
* ===========================================================================*/
.pdfraj-app {
/* Brand — ONE forest-green accent + states (was blue #2563eb). White button
text on #2563EB is ~13:1, well past WCAG AA; dark mode darkens the filled
buttons to #2563EB for the same reason (see the dark block in the shell). */
--pdfraj-accent: #2563EB;
--pdfraj-accent-hover: #1D54CF;
--pdfraj-accent-soft: #EEF4FF;
--pdfraj-accent-ring: rgba(37, 99, 235, 0.20);
--pdfraj-bd: #e2e5ea; --pdfraj-bd-strong: #d4d8df; /* workspace borders (was ~21 greys) */
--pdfraj-text: #1a1a2e; --pdfraj-text-muted: #6b7280; /* workspace text (was landing --pdfraj-ink/-muted) */
--pdfraj-sh-selected: 0 0 0 1.5px var(--pdfraj-accent) inset, 0 2px 8px rgba(37, 99, 235, 0.10); /* ONE selected look (cards + grid) */
--pdfraj-canvas: #f5f7fa; /* preview band — soft cool surface so pages float */
/* Spacing scale — 4px base (was ~30 ad-hoc gaps) */
--pdfraj-sp-1: 4px; --pdfraj-sp-2: 8px; --pdfraj-sp-3: 12px;
--pdfraj-sp-4: 16px; --pdfraj-sp-5: 24px; --pdfraj-sp-6: 32px;
/* Radius scale (was 27 values) */
--pdfraj-r-sm: 6px; --pdfraj-r-md: 10px; --pdfraj-r-lg: 14px; --pdfraj-r-pill: 999px;
/* Elevation (was ~18 one-offs) */
--pdfraj-sh-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
--pdfraj-sh-md: 0 2px 8px rgba(15, 23, 42, 0.08);
--pdfraj-sh-lg: 0 8px 24px -10px rgba(15, 23, 42, 0.28);
--pdfraj-sh-ring: 0 0 0 3px var(--pdfraj-accent-ring);
/* Type scale (was ~42 sizes) */
--pdfraj-fs-xs: 0.72rem; --pdfraj-fs-sm: 0.8125rem; --pdfraj-fs-base: 0.875rem;
--pdfraj-fs-md: 0.95rem; --pdfraj-fs-lg: 1.0625rem; --pdfraj-fs-xl: 1.25rem;
/* Controls / icons / motion */
--pdfraj-control-h: 40px; --pdfraj-control-h-sm: 32px;
--pdfraj-icon-sm: 16px; --pdfraj-icon-md: 20px;
--pdfraj-ws-ease: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Toolbar: lighter, neutral buttons (blue on hover) instead of heavy outlines. */
.ps-tool-btn { color: #3a3a55; border-color: var(--pdfraj-bd); font-weight: 600; }
.ps-tool-btn:hover { border-color: var(--pdfraj-accent); color: var(--pdfraj-accent); background: #f6f9ff; }
.ps-caret { color: #9095a8; }
/* Files / Pages: a clean pill segmented control (matches Compress). A small gap
* between segments + roomier padding so the pills breathe (were too compact). */
.ps-viewtoggle { display: inline-flex; align-items: center; background: #eef0f7; border: 0; padding: 3px; gap: 3px; border-radius: var(--pdfraj-r-md); }
.ps-viewtoggle button { background: transparent; border: 0; border-radius: 7px; padding: 0 13px; height: 100%; font: inherit; font-size: var(--pdfraj-fs-base); color: #5b6175; font-weight: 600; cursor: pointer; transition: background var(--pdfraj-ws-ease), color var(--pdfraj-ws-ease), box-shadow var(--pdfraj-ws-ease); }
.ps-viewtoggle button:hover { color: var(--pdfraj-text); }
/* Icon-only segments (list / grid) sit tighter than labelled ones (Files/Pages). */
.ps-viewtoggle button:not(:has(span)) { padding: 0 11px; }
.ps-viewtoggle button + button { border-left: 0; }
/* Smallpdf-style active segment: a white pill (elevated) on the grey track, not
* a tinted fill — applies to Files/Pages AND the list/grid toggle (shared class),
* so every multi-file workspace gets the same crisp control. */
.ps-viewtoggle button.is-active { background: #fff; color: var(--pdfraj-accent); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.10); }
/* Tiles: slightly softer paper + crisper hover/remove. */
.ps-doc .ps-thumb { border-radius: var(--pdfraj-r-sm); border-color: var(--pdfraj-bd); }
.ps-doc-remove { border-radius: 50%; color: #6b7280; font-size: var(--pdfraj-fs-md); line-height: 1; }
.ps-doc-remove:hover { color: #b91c1c; }
.ps-doc-name { color: var(--pdfraj-text); }
/* Per-file heading row when several documents share one page grid (multiJob
* tools such as Bates numbering). Spans the whole grid so the pages beneath it
* read as belonging to that file. */
.ps-dochead {
grid-column: 1 / -1;
display: flex; align-items: center; gap: var(--pdfraj-sp-2);
margin: var(--pdfraj-sp-2) 0 calc(-1 * var(--pdfraj-sp-1));
padding-bottom: var(--pdfraj-sp-2); border-bottom: 1px solid var(--pdfraj-bd);
font-size: var(--pdfraj-fs-sm);
}
.ps-dochead:first-child { margin-top: 0; }
.ps-dochead-pos {
flex: 0 0 auto; font-weight: 700; font-size: var(--pdfraj-fs-xs);
color: var(--pdfraj-accent); background: #eef2ff;
border-radius: var(--pdfraj-r-pill); padding: 0.15rem var(--pdfraj-sp-2);
}
.ps-dochead-name { flex: 1 1 auto; min-width: 0; font-weight: 600; color: var(--pdfraj-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ps-dochead-count { flex: 0 0 auto; color: var(--pdfraj-text-muted); font-variant-numeric: tabular-nums; }
/* "+" add-files tile at the end of the multi-file grid (Smallpdf/Sejda staple). */
.ps-add-tile {
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--pdfraj-sp-2);
min-height: 240px;
background: #fff; border: 2px dashed var(--pdfraj-bd-strong); border-radius: var(--pdfraj-r-sm);
color: #6b7280; font: inherit; font-weight: 600; cursor: pointer;
transition: border-color var(--pdfraj-ws-ease), color var(--pdfraj-ws-ease), background var(--pdfraj-ws-ease);
}
.ps-add-tile:hover { border-color: var(--pdfraj-accent); color: var(--pdfraj-accent); background: #f6f9ff; }
.ps-add-plus { font-size: 2.1rem; line-height: 1; font-weight: 300; }
.ps-add-label { font-size: var(--pdfraj-fs-base); }
/* ===== Result page = preview only + grid scroll (Smallpdf-match) ===== */
/* On the Done page, show ONLY the final preview — hide the editing toolbar + the
* "+ Add files" tile. Keyed off the Done side-panel header (.pe-ws-side-head--ok),
* which only renderDone emits. */
body:has(.pe-ws-side-head--ok) .ps-toolbar,
body:has(.pe-ws-side-head--ok) .ps-add-tile { display: none !important; }
body:has(.pe-ws-side-head--ok) .ps-doc { cursor: default; }
/* The page-studio grid scrolls within the viewport strip below the doc bar (the
* body is overflow:hidden while editing, so a tall grid was clipped). Scoped via
* :has(.ps-grid) so the PDF Editor (.pe-editor) is unaffected. */
body.pdfraj-ws-v2.pdfraj-editing .pdfraj-app.pdfraj-has-files .pdfraj-workspace-mount:has(.ps-grid) {
position: fixed;
top: calc(var(--pe-ws-top, 0px) + var(--pe-ws-bar, 52px) + var(--pe-ws-doc, 46px));
left: 96px; right: 340px; bottom: 0;
margin: 0; border-radius: 0;
overflow-y: auto; -webkit-overflow-scrolling: touch;
}
@media (max-width: 980px) {
body.pdfraj-ws-v2.pdfraj-editing .pdfraj-app.pdfraj-has-files .pdfraj-workspace-mount:has(.ps-grid) { left: 80px; right: 280px; }
}
@media (max-width: 768px) {
body.pdfraj-ws-v2.pdfraj-editing .pdfraj-app.pdfraj-has-files .pdfraj-workspace-mount:has(.ps-grid) { left: 0; right: 0; bottom: 64px; }
}
/* ===== Result preview (Smallpdf-style large page reader on the Done page) ===== */
/* After a multi-file op, the merged result shows as a large, single-column,
* read-only page preview (set by the shell -> page-studio resultMode -> .ps-grid-result;
* pages render at 760px for crispness). */
.ps-grid.ps-grid-result { display: block; max-width: 720px; margin: 0 auto; padding: var(--pdfraj-sp-5) 0 var(--pdfraj-sp-6); }
.ps-grid-result .ps-page { width: 100%; max-width: 680px; margin: 0 auto 1.25rem; cursor: default; }
.ps-grid-result .ps-page .ps-thumb {
width: 100%; min-height: 0; overflow: hidden;
border: 1px solid var(--pdfraj-bd); border-radius: var(--pdfraj-r-sm); background: #fff;
box-shadow: var(--pdfraj-sh-sm);
}
/* canvas: a rendered PDF page. img: an extracted image result (pdf-to-jpg,
extract-images) — it needs the same sizing, and without it a lazy ![]()
sits in a zero-width box and the browser never loads it at all. */
.ps-grid-result .ps-page .ps-thumb canvas,
.ps-grid-result .ps-page .ps-thumb img { width: 100%; height: auto; display: block; }
.ps-grid-result .ps-thumbtools { display: none !important; } /* read-only preview */
/* Same reason: a tick box on a page of the FINISHED document offers a selection
nothing can act on any more — the bulk actions it feeds are gone with the
select bar. */
.ps-grid-result .ps-doc-check { display: none !important; }
.ps-grid-result .ps-add-tile { display: none !important; }
@media (max-width: 768px) {
.ps-grid-result .ps-page { max-width: 100%; }
}
/* ===== Smallpdf merge toolbar match (multi-file) ===== */
/* Files | Pages toggle with leading icons (Files first). */
.ps-viewtoggle button { display: inline-flex; align-items: center; gap: var(--pdfraj-sp-2); }
.ps-viewtoggle button svg { width: 16px; height: 16px; flex: 0 0 auto; }
/* Toolbar CTA (Smallpdf "Finish" / tool name) — far right of the toolbar. */
.ps-cta {
margin-left: auto; min-height: var(--pdfraj-control-h);
display: inline-flex; align-items: center; gap: var(--pdfraj-sp-2);
border: 0; border-radius: var(--pdfraj-r-md); cursor: pointer;
background: var(--pdfraj-accent); color: #fff; font: inherit; font-weight: 700; font-size: var(--pdfraj-fs-md);
padding: var(--pdfraj-sp-2) var(--pdfraj-sp-5); box-shadow: var(--pdfraj-sh-sm);
transition: background var(--pdfraj-ws-ease), box-shadow var(--pdfraj-ws-ease);
}
.ps-cta:hover { background: var(--pdfraj-accent-hover); box-shadow: var(--pdfraj-sh-md); }
.ps-cta:disabled { background: #c7cdda; cursor: not-allowed; box-shadow: none; }
.ps-cta svg { width: 16px; height: 16px; flex: 0 0 auto; }
/* Multi-file editing: CTA is in the toolbar -> hide the side panel, full-width grid. */
.pdfraj-app.pe-ws-editing-multi .pe-ws-side { display: none !important; }
body.pdfraj-ws-v2 .pdfraj-app.pe-ws-has-rail.pdfraj-has-files.pe-ws-editing-multi { padding-right: 0 !important; }
body.pdfraj-ws-v2 .pdfraj-app.pdfraj-has-files.pe-ws-editing-multi .pe-ws-docbar { right: 0 !important; }
body.pdfraj-ws-v2.pdfraj-editing .pdfraj-app.pdfraj-has-files.pe-ws-editing-multi .pdfraj-workspace-mount:has(.ps-grid) { right: 0 !important; }
/* Multi-file editing: KEEP the shared doc bar so every tool has the same header
* ("Compress PDF", "Merge PDF", ...) — the workspace chrome is identical across
* tools; only the controls below differ. A single filename + size is meaningless
* for N files, so show ONLY the tool name and hide those two. The grid keeps the
* default top offset (reserves the doc-bar height), so the header sits flush above
* the toolbar with no gap. */
.pdfraj-app.pe-ws-editing-multi .pe-ws-docbar .pe-ws-docname-wrap,
.pdfraj-app.pe-ws-editing-multi .pe-ws-docbar .pe-ws-docsize { display: none !important; }
/* ===== Smallpdf merge grid details (multi Files view) ===== */
/* Lavender editing canvas. */
.pdfraj-app.pe-ws-editing-multi .pdfraj-workspace-mount:has(.ps-grid) { background: #eef2fc; }
/* Filename in a salmon pill; size hidden (Smallpdf shows only the name). */
.ps-grid-multi .ps-doc-caption { text-align: center; }
.ps-grid-multi .ps-doc-name {
display: inline-block; max-width: 100%; box-sizing: border-box;
background: #fde4e1; color: #2a2a44;
padding: var(--pdfraj-sp-1) var(--pdfraj-sp-3); border-radius: var(--pdfraj-r-sm);
font-size: var(--pdfraj-fs-sm); font-weight: 600;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ps-grid-multi .ps-doc-meta { display: none; }
/* Big "add files" tile: dashed blue, soft tint, circle-plus icon + descriptive text. */
.ps-add-tile { border-color: #b4c2e6; background: #f4f7fe; color: #5e6e92; gap: var(--pdfraj-sp-2); }
.ps-add-tile:hover { border-color: var(--pdfraj-accent); color: var(--pdfraj-accent); background: #eaf1ff; }
.ps-add-plus { width: 30px; height: 30px; color: #8b9bc4; }
.ps-add-tile:hover .ps-add-plus { color: var(--pdfraj-accent); }
.ps-add-label { font-size: var(--pdfraj-fs-base); line-height: 1.4; font-weight: 600; text-align: center; max-width: 82%; }
/* The tile takes a drop as well as a click, so it says so (client issue #32). */
.ps-add-hint { font-size: var(--pdfraj-fs-sm); font-weight: 500; text-align: center; max-width: 82%; opacity: 0.8; }
/* Files being dragged over a workspace that already holds some. The mount is the
drop target; highlighting the GRID (rather than the mount itself) keeps this
purely visual -- no position or stacking change on a container other elements
are placed against. */
.ps-dropping .ps-grid {
outline: 2px dashed var(--pdfraj-accent); outline-offset: 8px;
border-radius: var(--pdfraj-r-sm); background: #f6f9ff;
}
.ps-dropping .ps-add-tile { border-color: var(--pdfraj-accent); color: var(--pdfraj-accent); background: #eaf1ff; }
.ps-dropping .ps-add-plus { color: var(--pdfraj-accent); }
/* ===== Smallpdf merge: selection + row-1 icons + 2nd row ===== */
/* Selection checkbox (top-left of each Files-view tile), in a small white box. */
.ps-doc-check { position: absolute; top: 8px; left: 8px; z-index: 4; display: inline-flex; padding: 2px; background: #fff; border-radius: var(--pdfraj-r-sm); box-shadow: var(--pdfraj-sh-sm); cursor: pointer; }
.ps-doc-check input { width: 17px; height: 17px; margin: 0; cursor: pointer; accent-color: var(--pdfraj-accent); }
/* Selected tile highlight. */
.ps-doc.ps-selected { background: #e6eefc; border-radius: var(--pdfraj-r-md); }
.ps-doc.ps-selected .ps-thumb { box-shadow: 0 0 0 2px var(--pdfraj-accent); }
/* Row-1 icon buttons (rotate/delete) + divider. */
.ps-tbar-sep { width: 1px; height: 20px; background: #dfe2ec; flex: 0 0 auto; }
.ps-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 0; border-radius: var(--pdfraj-r-md); background: transparent; color: #3a3a55; cursor: pointer; transition: background var(--pdfraj-ws-ease), color var(--pdfraj-ws-ease); }
.ps-icon-btn:hover:not(:disabled) { background: #e7ebf5; color: var(--pdfraj-accent); }
.ps-icon-btn:disabled { color: #c2c7d4; cursor: not-allowed; }
.ps-icon-btn svg { display: block; }
/* Second row: files-view "Select all" only. Sort and the grid/list toggle moved
* up into the single bar, so there is no longer a right-hand cluster here.
* The box itself comes from .ps-selbar, which this element also carries -- it
* keeps NO padding of its own, or the old 8/24 would stack on top of the card's
* and leave a band of nothing under the label. */
.ps-multibar { display: flex; align-items: center; }
/* The grid gets the breathing room the bars gave up. */
.ps-grid { margin-top: var(--ps-pad, 0px); }
.ps-selall { display: inline-flex; align-items: center; gap: var(--pdfraj-sp-2); font-size: var(--pdfraj-fs-base); font-weight: 600; color: #3a3a55; cursor: pointer; user-select: none; }
.ps-selall input { width: 17px; height: 17px; margin: 0; accent-color: var(--pdfraj-accent); cursor: pointer; }
/* Multi list view (Smallpdf): left-aligned stacked rows. */
/* Was max-width: 760px on a workspace that is ~965px wide, so the list sat in a
* narrow strip with the rest of the row empty. Full width, and the file rows join
* the same connected surface the page rows use. */
.ps-grid-multi.ps-list { display: block; max-width: none; margin: var(--ps-pad, 0px) 0 0; }
.ps-grid-multi.ps-list .ps-doc {
display: flex; flex-direction: row; align-items: center; gap: var(--pdfraj-sp-4);
width: 100%; margin-bottom: 0;
background: #fff;
border: 1px solid var(--pdfraj-bd); border-top: 0; border-radius: 0; box-shadow: none;
padding: var(--pdfraj-sp-3) var(--pdfraj-sp-4);
}
.ps-grid-multi.ps-list .ps-doc + .ps-doc { border-top: 1px solid var(--pdfraj-rule, #eef0f5); }
.ps-grid-multi.ps-list .ps-doc:first-of-type {
border-top: 1px solid var(--pdfraj-bd);
border-radius: var(--pdfraj-r-md) var(--pdfraj-r-md) 0 0;
}
.ps-grid-multi.ps-list .ps-doc:not(:has(~ .ps-doc)) { border-radius: 0 0 var(--pdfraj-r-md) var(--pdfraj-r-md); }
/* Match the page rows (64px). A file row with a 48px thumbnail next to a page row
* with a 64px one made the same list look like two different lists. */
.ps-grid-multi.ps-list .ps-doc-thumb-wrap { flex: 0 0 64px; width: 64px; }
.ps-grid-multi.ps-list .ps-doc .ps-thumb { height: 84px; min-height: 0; align-items: center; }
.ps-grid-multi.ps-list .ps-doc .ps-thumb canvas, .ps-grid-multi.ps-list .ps-doc .ps-thumb .ps-doc-img { max-width: 100%; max-height: 100%; width: auto; height: auto; }
.ps-grid-multi.ps-list .ps-doc-caption { text-align: left; align-items: flex-start; }
.ps-grid-multi.ps-list .ps-add-tile { width: 100%; min-height: 72px; flex-direction: row; gap: var(--pdfraj-sp-2); margin-top: var(--pdfraj-sp-4); }
/* Uniform tile heights (Files grid): center + contain the preview so portrait and
* landscape files share one equal-height tile (Smallpdf). */
.ps-grid-multi:not(.ps-list) .ps-doc .ps-thumb { height: 250px; min-height: 0; align-items: center; padding: var(--pdfraj-sp-1); box-sizing: border-box; }
.ps-grid-multi:not(.ps-list) .ps-doc .ps-thumb canvas,
.ps-grid-multi:not(.ps-list) .ps-doc .ps-thumb .ps-doc-img { width: auto; height: auto; max-width: 100%; max-height: 100%; border-radius: var(--pdfraj-r-sm); }
/* Insert-between circle (Smallpdf): sits in the gap on each Files-grid tile. */
.ps-grid-multi:not(.ps-list) .ps-insert {
position: absolute; right: -26px; top: 125px; transform: translateY(-50%); z-index: 3;
width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center;
border: 0; border-radius: 50%; background: var(--pdfraj-accent); color: #fff; cursor: pointer;
box-shadow: var(--pdfraj-sh-md); transition: background var(--pdfraj-ws-ease), transform var(--pdfraj-ws-ease);
}
/* Discoverability: the "+" grows and gains a halo on hover/focus so it reads as
* a control, and it lifts a little whenever its file tile is hovered, so a user
* scanning the files notices where new ones can be dropped in. */
.ps-grid-multi:not(.ps-list) .ps-insert:hover {
background: var(--pdfraj-accent-hover); transform: translateY(-50%) scale(1.18);
box-shadow: 0 6px 16px -4px color-mix(in srgb, var(--pdfraj-accent) 55%, transparent);
}
.ps-grid-multi:not(.ps-list) .ps-doc:hover .ps-insert { transform: translateY(-50%) scale(1.1); }
.ps-grid-multi:not(.ps-list) .ps-insert:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.ps-grid-multi.ps-list .ps-insert, .ps-grid-pages .ps-insert, .ps-grid-result .ps-insert { display: none; }
/* Done page: the filename + rename live in the result side panel, so hide the
* redundant top doc bar (it was a 2nd rename) and lift the preview to fill the gap. */
/* Done: KEEP the tool header (↺ Compress PDF) visible on the result too; just
* drop the redundant filename/size from the bar — the result panel shows them. */
body:has(.pe-ws-side-head--ok) .pe-ws-docbar .pe-ws-docname-wrap,
body:has(.pe-ws-side-head--ok) .pe-ws-docbar .pe-ws-docsize { display: none !important; }
body:has(.pe-ws-side-head--ok) .pdfraj-workspace-mount:has(.ps-grid) {
top: calc(var(--pe-ws-top, 0px) + var(--pe-ws-bar, 52px)) !important;
}
/* Tile hover tools pill: top-right (Smallpdf), clear of the top-left checkbox. */
.ps-thumbtools { left: auto; right: 8px; transform: none; }
/* Phase 12.3: the large result preview eases in on the Done screen. */
.ps-grid-result { animation: pe-ws-rise 0.30s ease both; }
@media (prefers-reduced-motion: reduce) { .ps-grid-result { animation: none; } }
/* ---- Inline workspace notice --------------------------------------------- */
/* The .ps-notice rules moved to pdfraj-workspace-shell.css. They are not the
* page studio's alone: Workspace.prototype._showViewNotice reuses the same
* classes for every view that has no strip of its own -- the PDF Editor among
* them -- and THIS file is only loaded on the workspace pages. So on the editor
* the markup rendered with no rules at all: the box lost display:flex and its
* 8px gap, so the title ran straight into the message ("digitally
* signedProcessing this PDF..."), and with no padding, background or font-size
* it was 17px black text across the top of the toolbar instead of an amber
* banner. (Portal issue #32, signed-PDF warning UI.) */
/* A corrupted file's tile: red highlight so the affected file is unmistakable;
* its delete button (hover tools) is the way out. */
.ps-doc.ps-doc-broken .ps-doc-thumb-wrap { outline: 2px solid #dc2626; outline-offset: -2px; border-radius: 10px; background: #fef2f2; }
.ps-doc.ps-doc-broken .ps-doc-meta { color: #b91c1c; font-weight: 600; }
/* The .pdfraj-ws-warn rules moved to pdfraj-app.css, for the same reason the
* .ps-notice rules moved out above: the banner is built by
* Workspace.prototype._ensureWarnEl, which runs on EVERY page that hosts the
* upload flow -- the PDF Editor included -- while this file is loaded only on
* the workspace tool pages. With no rules the inline