/* ─────────────────────────────────────────────────────────────────────────────
   DOCUMENTS
   Client grid, the graph bar, the project table and the documents library.

   Part 10 of 11, cut from the 5,142-line app.css. THE ORDER OF THESE
   FILES IS LOAD-BEARING — they are one cascade, split for navigation only, and
   index.php links them in this sequence. Moving one changes which rule wins.
   ───────────────────────────────────────────────────────────────────────────── */
/* =========================================
   CLIENT GRID — Studio MARY letterhead style
   Each card reads like one of the studio's
   documents: Executive display name, full-bleed
   hairline rules, uppercase colon labels, a
   large "grand total" figure, right amounts,
   and the #00A2FF house accent on outstanding.
   ========================================= */
#grid-clients.client-doc-grid,
#grid-team.client-doc-grid,
#grid-projects.client-doc-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
    align-items: stretch;
    margin-bottom: var(--space-8);
}

/* ---------------------------------------------------------------
   CLIENT CARD = flat Studio MARY "paper module" (pilot — drops the
   liquid-glass material for a clean, opaque, hairline-framed panel).
   Overrides the shared .glass-panel material for these cards only.
   --------------------------------------------------------------- */
.board.client-doc {
    --cdoc-pad: 24px;
    padding: 18px var(--cdoc-pad) 0;
    position: relative;                    /* anchor the holographic rim ::after */
    overflow: visible;
    letter-spacing: 0;
    background: var(--bg-card);            /* opaque paper — no translucency */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;                          /* no outer frame — drop shadow does the framing */
    border-radius: var(--radius-board);    /* match the KPI/analysis board corner (10px) — unified across all cards */
    box-shadow: var(--shadow-2);           /* realistic layered drop shadow */
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
/* flat document module — no glass gloss, no holographic rim (both removed) */
.board.client-doc::before,
.board.client-doc::after { content: none; }

/* light theme keeps the realistic layered shadow */
html[data-theme='light'] .board.client-doc {
    box-shadow: var(--shadow-2);
}
/* hover — keep the ink frame; just lift the module with a stronger shadow */
.board.client-doc:hover {
    box-shadow: var(--shadow-3);
}

/* actions button only — push to corner, no height */
.client-doc .cdoc-top { display: flex; justify-content: flex-end; margin: 0 -8px 0 0; }
.cdoc-actions { }

.cdoc-name {
    font-size: 28px; line-height: 1.08; font-weight: var(--fw-semibold); letter-spacing: var(--tracking-tight);
    color: var(--text-main); margin: 6px 0 0;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; min-height: 60px;
}

/* full-bleed hairline rule */
.cdoc-rule { border-bottom: 1px solid var(--border-ink); margin: 15px calc(-1 * var(--cdoc-pad)) 0; }

/* contact block — full width, no label column */
.cdoc-meta { padding-top: 13px; }
.cdoc-meta-val {
    display: flex; flex-direction: column; gap: 4px;
    font-size: 13.5px; line-height: 1.5; color: var(--text-main);
    word-break: break-word; min-height: 72px;
}
.cdoc-email { text-decoration: underline; }
.cdoc-muted { color: var(--text-muted); }

/* headline — label stacked above amount (Swiss caption + figure unit) */
.cdoc-headline {
    display: flex; flex-direction: column; align-items: flex-start;
    gap: 5px; padding-top: 18px;
}
.cdoc-headline-label {
    font-size: 11px; letter-spacing: var(--tracking-caps); text-transform: uppercase;
    font-weight: var(--fw-medium); color: var(--text-muted);
}
.cdoc-headline-amt {
    font-size: 35px; line-height: 1; font-weight: var(--fw-bold);
    letter-spacing: var(--tracking-display); color: var(--text-main);
    font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* shared label style (also used in .cdoc-foot) */
.cdoc-label { font-size: 10.5px; letter-spacing: var(--tracking-caps); text-transform: uppercase; font-weight: var(--fw-medium); color: var(--text-muted); }

/* ===============================================================
   CANONICAL GRAPH BAR — the ONE horizontal bar-graph system, app-wide.
   The project-card proportion chart is the sample; every bar graph now
   uses this inline row: KEY (tracked caps) · 3px pill track/fill · VALUE
   (tabular) · %. Single source — dashboard, projects, clients, team,
   income, expense all render `.cdoc-chart-row`s. Fill colour comes from
   .exp/.prof/.pay or an inline background-color.
   =============================================================== */
.cdoc-chart { display: flex; flex-direction: column; gap: 12px; padding-top: 15px; padding-bottom: 17px; }
.cdoc-chart.flush { padding: 0; }                 /* dashboard/income/expense: no card padding */
.cdoc-chart-row { display: flex; align-items: center; gap: 10px; }
.cdoc-chart-key {
    font-size: 10.5px; letter-spacing: var(--tracking-caps); text-transform: uppercase;
    font-weight: var(--fw-medium); color: var(--text-muted); width: 84px; flex-shrink: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cdoc-chart-track {
    flex: 1; height: 3px; background: var(--divider-strong);
    position: relative; overflow: hidden; border-radius: var(--radius-pill);
}
.cdoc-chart-fill {
    position: absolute; left: 0; top: 0; bottom: 0; border-radius: var(--radius-pill);
    transition: width 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}
.cdoc-chart-fill.exp  { background: var(--neon-red);   box-shadow: 0 0 4px var(--neon-red-glow); }
.cdoc-chart-fill.prof { background: var(--neon-green); box-shadow: 0 0 4px var(--neon-green-glow); }
.cdoc-chart-fill.pay  { background: #00A2FF; }
.cdoc-chart-val {
    font-size: 13.5px; font-weight: var(--fw-semibold); color: var(--text-main);
    font-variant-numeric: tabular-nums; white-space: nowrap;
    min-width: 56px; text-align: right;
}
.cdoc-chart-val.is-neg { color: var(--neon-red);   text-shadow: 0 0 6px var(--neon-red-glow); }
.cdoc-chart-val.is-pos { color: var(--neon-green); text-shadow: 0 0 6px var(--neon-green-glow); }
.cdoc-chart-pct { font-size: 10.5px; font-weight: var(--fw-medium); color: var(--text-muted); min-width: 34px; text-align: right; font-variant-numeric: tabular-nums; }

/* outstanding A/R — pinned foot, full-bleed rule, house blue accent */
.cdoc-foot {
    display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
    margin-top: auto;
    margin-left: calc(-1 * var(--cdoc-pad)); margin-right: calc(-1 * var(--cdoc-pad));
    padding: 12px var(--cdoc-pad) 17px;
    border-top: 1px solid var(--border-ink);
}
.cdoc-out { font-size: 14.5px; font-weight: var(--fw-bold); letter-spacing: var(--tracking-tight); color: #00A2FF; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cdoc-out.zero { color: var(--text-muted); font-weight: var(--fw-regular); }

.cdoc-more { grid-column: 1 / -1; display: flex; justify-content: center; padding: 32px; }
.cdoc-empty {
    grid-column: 1 / -1; text-align: center; padding: 48px;
    color: var(--text-muted); font-size: 12px; font-weight: var(--fw-medium); letter-spacing: var(--tracking-wide); text-transform: uppercase;
}

/* =========================================
   STUDIO MARY ACCENTS — subtle Swiss treatment
   carried into the projects KPI board + table
   (proportion bars, tracked caps, bare numbers,
   the #00A2FF house accent). Scoped so other
   boards/tables are untouched.
   ========================================= */

/* "Average by type" → ink-bar ledger (Müller-Brockmann figure unit) */
#cat-averages-list { display: flex; flex-direction: column; gap: 16px; }
.kpi-avg-row { display: flex; flex-direction: column; gap: 7px; }
.kpi-avg-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.kpi-avg-cat {
    font-size: 10.5px; letter-spacing: var(--tracking-caps); text-transform: uppercase;
    color: var(--text-main); font-weight: var(--fw-medium);
}
.kpi-avg-count { color: var(--text-muted); font-weight: var(--fw-regular); }
.kpi-avg-val {
    font-size: 18px; line-height: 1; font-weight: var(--fw-bold);
    letter-spacing: var(--tracking-tight); color: var(--text-main);
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.kpi-avg-track { height: 3px; background: var(--divider-strong); position: relative; }
.kpi-avg-fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--text-main); }
.kpi-avg-sub {
    display: flex; justify-content: space-between; gap: 10px;
    font-size: 10.5px; letter-spacing: var(--tracking-caps); text-transform: uppercase;
    font-weight: var(--fw-medium); color: var(--text-muted);
}
.kpi-avg-sub .tabular-nums { letter-spacing: 0; font-size: 12.5px; }

/* ============================================================
   PROJECT LIST — Swiss data table. Fixed grid columns, tracked-caps
   sortable headers (hairline rule, no hard ink line), tabular figures,
   calm rhythm. Text LEFT · figures RIGHT. Responsive: secondary columns
   drop in tiers, their data preserved in the Project cell's sub-line.
   ============================================================ */
#table-projects { width: 100%; border-collapse: collapse; table-layout: fixed; }
/* Swiss column grid — PROJECT is the flexible anchor and always gets priority;
   status is now just a dot, the secondary text columns are trimmed, so the name
   keeps a readable width across the desktop range (and drops siblings below). */
.pj-c-status { width: 86px; }   /* dot only + room for the "STATUS" header */
.pj-c-name   { width: auto; min-width: 150px; }   /* the flexible anchor — never crushed */
.pj-c-client { width: 13%; }
.pj-c-lead   { width: 11%; }
.pj-c-type   { width: 13%; }
#table-projects .pj-c-num { width: 104px; }
.pj-c-act    { width: 52px; }   /* a single three-dot overflow menu — the reclaimed width flows to the name */

#table-projects thead th {
    font-size: 10px; letter-spacing: var(--tracking-caps); text-transform: uppercase;
    font-weight: var(--fw-medium); color: var(--text-muted);
    padding: var(--space-5) 14px 13px; vertical-align: bottom; white-space: nowrap;   /* top inset — untitled card frames itself */
    border-bottom: 1px solid var(--divider);   /* hairline header rule */
}
/* 24px card-edge inset (matches the global list card) — was a too-tight 4px hug */
#table-projects thead th:first-child, #table-projects tbody td:first-child { padding-left: var(--space-6); }
#table-projects thead th:last-child,  #table-projects tbody td:last-child  { padding-right: var(--space-6); }
#table-projects tbody td { padding: 14px; vertical-align: middle; border-bottom: 1px solid var(--divider); font-size: 13.5px; color: var(--text-main); }
#table-projects tbody tr:last-child td { border-bottom: none; padding-bottom: var(--space-5); }   /* bottom breathing at the rounded card edge */
.pj-row { cursor: pointer; transition: background 0.14s ease; }
.pj-row:hover td { background: var(--bg-hover); }
.pj-row:focus-visible { outline: 2px solid var(--chart-blue); outline-offset: -2px; }

/* STATUS — a single dot (the label moved to a hover tooltip on the dot). */
.pj-st { display: inline-flex; align-items: center; gap: 5px; cursor: default; }
.pj-st-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
/* per-dot colour so a quoting+invoicing project can show BOTH a cyan and a yellow dot */
.pj-st-dot--quoting   { background: var(--chart-cyan);     box-shadow: 0 0 6px color-mix(in srgb, var(--chart-cyan) 55%, transparent); }
.pj-st-dot--invoicing { background: var(--warning-yellow); box-shadow: 0 0 6px color-mix(in srgb, var(--warning-yellow) 60%, transparent); }
.pj-st-dot--settled   { background: var(--neon-green);     box-shadow: 0 0 6px var(--neon-green-glow); }
.pj-st-dot--archived  { background: var(--text-muted);     box-shadow: none; }

/* PROJECT — name anchor + a sub-line (client · type) revealed when columns collapse */
.pj-c-name { min-width: 0; }
.pj-tbl-name { display: block; font-size: 14px; font-weight: var(--fw-semibold); color: var(--text-main); letter-spacing: 0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pj-tbl-sub { display: none; font-size: 12px; color: var(--text-muted); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pj-c-client { color: var(--text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pj-cell-link { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 0.15s ease; }
.pj-cell-link:hover { border-bottom-color: currentColor; }
/* LEAD column — avatar + manager name */
.pj-c-lead { color: var(--text-main); overflow: hidden; }
.pj-lead-cell { display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; }
.pj-lead-av--sm { width: 20px; height: 20px; }
.pj-lead-av--sm > span { font-size: 8.5px; }
.pj-lead-cell-name { font-size: 13.5px; color: var(--text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pj-lead-cell--none { color: var(--text-muted); }
/* a long type (e.g. "Branding, Motion & Video") WRAPS to a new line inside its cell instead
   of overflowing into the Net Profit column — line break to avoid the collision. */
.pj-tbl-type { display: block; font-size: 13.5px; color: var(--text-muted); white-space: normal; overflow-wrap: break-word; line-height: 1.3; }

/* FIGURES — tabular, right-aligned; profit carries the house accent */
#table-projects .pj-tbl-profit { font-weight: var(--fw-semibold); }
#table-projects .pj-tbl-profit.is-pos { color: var(--neon-green); }
#table-projects .pj-tbl-profit.is-neg { color: var(--neon-red); }
#table-projects .pj-tbl-margin { color: var(--text-muted); }
#table-projects .pj-tbl-ar { color: var(--text-muted); }
#table-projects .pj-tbl-ar.has-ar { color: var(--text-main); font-weight: var(--fw-semibold); }

/* ACTIONS — a single three-dot overflow menu (edit · archive · delete grouped), for
   desktop + touch. The popover is fixed-positioned (window.toggleRowMenu) so it never
   clips — no overflow overrides needed on the wrapper/board. */
.pj-c-act { text-align: right; white-space: nowrap; }
.pj-row-menu-btn { width: 32px; height: 32px; opacity: 0.55; transition: opacity 0.15s ease, background 0.15s ease; }
.pj-row-menu-btn .material-icons { font-size: 18px; }
.pj-row:hover .pj-row-menu-btn, .row-menu-open .pj-row-menu-btn { opacity: 1; }

.pj-tbl-empty { padding: 50px 20px; text-align: center; color: var(--text-muted); font-size: 13px; letter-spacing: var(--tracking-wide); }
.pj-tbl-more td { text-align: center; padding: 18px; border-bottom: none; }

/* responsive tiers — secondary columns drop in stages so PROJECT (the name) keeps a
   readable width: Type goes first (it's the least essential / least space it buys
   the name), then Client + Margin, with the sub-line carrying client · type. */
@media (max-width: 1240px) {
    #table-projects .pj-hide-md { display: none; }
}
@media (max-width: 1100px) {
    #table-projects .pj-hide-lg { display: none; }
    #table-projects .pj-tbl-sub { display: block; }
}
@media (max-width: 680px) {
    #table-projects .pj-hide-sm { display: none; }
    .pj-c-status { width: 64px; }
    #table-projects .pj-c-num { width: 96px; }
    .pj-c-act { width: 44px; }
    #table-projects tbody td, #table-projects thead th { padding: 12px 7px; }
    #table-projects thead th:first-child, #table-projects tbody td:first-child { padding-left: var(--space-4); }
    #table-projects thead th:last-child,  #table-projects tbody td:last-child  { padding-right: var(--space-4); }
}

/* ARCHIVED PROJECT — read-only. A restore banner + every edit/delete control in the
   detail view is disabled (the backend also blocks it; this just makes it obvious). */
.pj-archived-banner { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 13px 20px; margin-bottom: 24px; border-radius: var(--radius-board); background: var(--active-theme-bg); border: 1px solid var(--divider-strong); }
.pj-archived-banner-msg { display: flex; align-items: center; gap: 10px; color: var(--text-muted); font-size: 13px; font-weight: var(--fw-medium); min-width: 0; }
.pj-archived-banner-msg .material-icons { font-size: 18px; flex-shrink: 0; }
/* Controls stay visible & muted (read-only cue) but remain clickable — a click pops
   the "restore first" warning rather than silently doing nothing. */
.is-archived-project [onclick*="editRecord"],
.is-archived-project [onclick*="deleteEntry"],
.is-archived-project [onclick*="editTransaction"],
.is-archived-project [onclick*="openPhaseInvoiceModal"],
.is-archived-project [onclick*="openReceiveModal"],
.is-archived-project #btn-create-doc { opacity: 0.45; cursor: not-allowed; }
.is-archived-project #btn-create-doc { box-shadow: none; }

/* =========================================
   DOCUMENTS LIBRARY — the A4 gallery: a navigation rail (filters + item list,
   or the statement menu) beside a paper viewer. The paper is a fixed-ratio A4
   frame; HTML sheets scale into it (transform, js), pdf.js pages render as
   canvases at the frame's width. On phones the rail rotates into a horizontal
   filmstrip above the paper (see the doclib responsive block at file end).
   ========================================= */
.doclib { display: grid; grid-template-columns: minmax(280px, 344px) minmax(0, 1fr); gap: 28px; align-items: start; }

/* rail — a BOARD like every other view's panel (bg-card surface, board radius,
   house shadow) so the library drawer has the same breathing space and weight
   as the Projects / Overview boards. */
.doclib-rail {
    position: sticky; top: 84px; display: flex; flex-direction: column; gap: 16px; min-width: 0;
    padding: var(--space-4);
    background: var(--bg-card); border: 1px solid var(--divider);
    border-radius: var(--radius-board); box-shadow: var(--shadow-2);
}
.doclib-projects, .doclib-stmts { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
/* filter = an inset segmented control: quiet pills on a recessed track, the
   shared liquid-glass .pill-glider glides to the active one (pill-slider.js) */
.doclib-filters { position: relative; display: flex; flex-wrap: wrap; gap: 3px; padding: 4px; border-radius: var(--radius-md); }
.doclib-pill {
    position: relative; z-index: 1;
    padding: 7px 12px;
    background: transparent; color: var(--text-muted);
    font-size: 12px;
}
.doclib-pill:hover { background: var(--active-theme-bg); color: var(--text-main); }
.doclib-pill.active { cursor: default; }
.doclib-filters.has-glider .doclib-pill.active { background: transparent; color: var(--text-main); box-shadow: none; }
.doclib-pill-n { margin-left: 5px; font-size: 10px; font-weight: var(--fw-semibold); opacity: 0.5; }
.doclib-pill-n:empty { display: none; }
.doclib-sortrow { display: flex; align-items: center; gap: 10px; padding: 0 2px; }
.doclib-sortlabel { font-size: 10px; font-weight: var(--fw-bold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-muted); flex: 0 0 auto; }
.doclib-sortsel { flex: 1; min-width: 0; padding: 8px 10px; font-size: 12.5px; }
/* padded on every side (not just the scrollbar edge) — overflow-y:auto makes
   overflow-x compute to auto too, so the floating cards' shadow needs clearance
   left/top/bottom or it clips against the scroll container. */
.doclib-list { position: relative; display: flex; flex-direction: column; gap: var(--space-3); max-height: calc(100vh - 380px); overflow-y: auto; padding: 4px 8px 4px 4px; }
.doclib-group { margin: 10px 2px 2px; font-size: 10px; font-weight: var(--fw-bold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-muted); }
/* landscape floating card — same recipe as the Projects portal cards (.pj-card):
   board radius, resting tintable shadow, lift + deepen on hover. Kept horizontal
   (icon · text · figure) rather than copying pj-card's tall layout. */
.doclib-item {
    position: relative; z-index: 1;   /* ride above the sliding glass capsule */
    display: flex; align-items: center; gap: 12px; width: 100%;
    padding: 14px 16px; border: 1px solid var(--divider); border-radius: var(--radius-board);
    background: var(--bg-card); text-align: left; cursor: pointer;
    box-shadow: var(--shadow-2);
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.26s ease, transform 0.26s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (hover: hover) { .doclib-item:hover { transform: translateY(-3px); border-color: var(--text-muted); box-shadow: var(--shadow-3); } }
/* GLIDER MODE — the list becomes a RECESSED TRACK, the exact grammar of every
   other glider container (the filter track right above it, the header toggle,
   the modal segments): quiet transparent rows on a bg-main field, so the ONLY
   raised element is the glass capsule under the active item — unmistakable.
   The floating-card look + ink inversion survive as the no-JS fallback. */
.doclib-list.has-glider { background: var(--bg-main); border-radius: var(--radius-md); padding: 6px; gap: 2px; }
.doclib-list.has-glider .doclib-item { background: transparent; border-color: transparent; box-shadow: none; border-radius: var(--radius-md); }
@media (hover: hover) {
    .doclib-list.has-glider .doclib-item:hover { transform: none; box-shadow: none; border-color: transparent; background: color-mix(in srgb, var(--bg-card) 62%, transparent); }
}
.doclib-list.has-glider .doclib-item.active { background: transparent; border-color: transparent; box-shadow: none; }
.doclib-list.has-glider .doclib-item.active:hover { transform: none; box-shadow: none; }
/* rows are radius-md in the track — the capsule takes their shape here */
.doclib-list .pill-glider { border-radius: var(--radius-md); }
/* fallback: the house INK INVERSION (kept for no-JS) */
.doclib-list:not(.has-glider) .doclib-item.active { background: var(--text-main); border-color: var(--text-main); box-shadow: var(--shadow-2); }
.doclib-list:not(.has-glider) .doclib-item.active:hover { transform: none; box-shadow: var(--shadow-2); }
.doclib-list:not(.has-glider) .doclib-item.active .doclib-item-tx b, .doclib-list:not(.has-glider) .doclib-item.active .doclib-item-meta b { color: var(--bg-card); }
.doclib-list:not(.has-glider) .doclib-item.active .doclib-item-tx span { color: var(--bg-card); opacity: 0.62; }
.doclib-list:not(.has-glider) .doclib-item.active .doclib-item-ic { background: color-mix(in srgb, var(--bg-card) 16%, transparent); color: var(--bg-card); }
/* on the ink-inverted fallback card the gold INK flips to the bright neon */
.doclib-list:not(.has-glider) .doclib-item.active .pj-status--warn { color: var(--warning-yellow); border-color: color-mix(in srgb, var(--warning-yellow) 55%, transparent); }
.doclib-list:not(.has-glider) .doclib-item.active .pj-status--neutral { color: var(--bg-card); border-color: color-mix(in srgb, var(--bg-card) 40%, transparent); }
.doclib-item-ic { flex: 0 0 auto; width: 32px; height: 32px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; background: var(--bg-hover); color: var(--text-main); }
.doclib-item-ic .material-icons-outlined { font-size: 17px; }
.doclib-item-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.doclib-item-tx b { font-size: 12.5px; font-weight: var(--fw-semibold); color: var(--text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doclib-item-tx span { font-size: 11px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* right column: the figure on top, the document's status word under it */
.doclib-item-meta { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.doclib-item-meta b { font-size: 12px; font-weight: var(--fw-semibold); color: var(--text-main); }
/* the status pill (shared .pj-status recipe) at rail-card scale */
.doclib-item-meta .pj-status { font-size: 8.5px; padding: 2.5px 8px 2.5px 7px; gap: 5px; }
.doclib-item-meta .pj-status .pj-status-dot { width: 5px; height: 5px; }
.doclib-none { padding: 20px 8px; font-size: 12.5px; color: var(--text-muted); }

/* stage: toolbar over the paper canvas */
/* stage — no box: the A4 sheets float straight on the page (house tintable
   shadows) at reading size, page under page; the PAGE scrolls to read. One
   sticky frosted command bar floats over them with everything the reader
   needs (meta · pager · prev/next across documents · print · download). */
.doclib-stage { min-width: 0; display: flex; flex-direction: column; gap: 24px; }
/* flat floating pill — same recipe as the header's .nav-group/.action-group and
   .modal-card/.dropdown-content: opaque bg-card, no frame, depth from --shadow-3
   alone (the site retired frosted-blur + border chrome in favour of shadow-only
   framing; this bar predated that and still had the old glass treatment). */
.doclib-bar {
    position: sticky; top: 84px; z-index: 6;
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 20px 18px 20px 28px; border-radius: var(--radius-pill);
    background: var(--bg-card);
    box-shadow: var(--shadow-3);
}
.doclib-meta { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.doclib-meta-top { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.doclib-meta b { font-size: 14px; font-weight: var(--fw-bold); color: var(--text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doclib-cap { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; font-size: 9px; font-weight: var(--fw-bold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-muted); white-space: nowrap; }
/* the status pill rides beside the type word at caption scale */
.doclib-cap .pj-status { font-size: 8.5px; padding: 2.5px 8px 2.5px 7px; gap: 5px; }
.doclib-cap .pj-status .pj-status-dot { width: 5px; height: 5px; }
.doclib-meta > span { font-size: 11px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doclib-tools { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
/* document controls (CTA + ⋮ menu) — filled per selection, empty for files/statements */
.doclib-actions { display: flex; align-items: center; gap: 2px; }
.doclib-actions .lst-cta { margin-right: 6px; }
.doclib-tools .action-icon-btn:disabled { opacity: 0.3; cursor: default; }
.doclib-pageind { font-size: 11.5px; font-weight: var(--fw-semibold); color: var(--text-muted); margin-right: 6px; white-space: nowrap; }
.doclib-bar-sep { width: 1px; height: 18px; background: var(--divider); margin: 0 6px; flex: 0 0 auto; }
/* the sheets: big on landing (reading width), each page its own floating A4 */
.doclib-sheets {
    display: flex; flex-direction: column; align-items: center; gap: 28px;
    min-height: 320px; padding-bottom: 40px; transition: opacity 0.2s ease;
}
.doclib-sheets.busy { opacity: 0.55; }
.doclib-sheet {
    position: relative; width: min(100%, 820px);
    background: #fff;
    box-shadow: var(--shadow-3);   /* same floating-chrome tier as the bar above it */
}
.doclib-sheet--a4 { overflow: hidden; }   /* height set by JS: width × √2 */
.doclib-a4host { position: absolute; inset: 0 auto auto 0; transform-origin: top left; }
.doclib-page-canvas { display: block; width: 100%; height: auto; min-height: 120px; }
.doclib-img { display: block; width: 100%; height: auto; }
/* blank A4 — the stage always shows paper: empty state, errors, and (with the
   shimmer) a statement being "printed". Ink is fixed: the paper never darkens. */
.doclib-sheet--blank {
    aspect-ratio: 210 / 297;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
    padding: 24px; box-sizing: border-box; text-align: center;
    font-size: 12.5px; color: #6d7078;
}
.doclib-sheet--blank .material-icons-outlined { font-size: 30px; color: rgba(17, 19, 28, 0.35); }
.doclib-sheet--busy {
    background: linear-gradient(105deg, #fff 42%, #f2f3f5 50%, #fff 58%);
    background-size: 220% 100%;
    animation: doclib-print 1.5s linear infinite;
}
@keyframes doclib-print { from { background-position: 130% 0; } to { background-position: -30% 0; } }

/* =========================================
   SHARED RECIPES — one look per job. Component classes keep only their own
   size/colour diffs; the SKELETON (shape, motion, active state) is defined
   ONCE here so every instance stays in step. Placed late so shared active
   states win their specificity ties against per-class hovers. Documented in
   styleguide.php — add new bars/pills/icon-buttons to these groups first.
   ========================================= */
/* progress bars — every track/fill pair shares the pill skeleton + spring */
.pb-bar-track, .perf-valrow-track, .kpi-avg-track, .pj-bar { border-radius: var(--radius-pill); overflow: hidden; }
.pb-bar-fill, .perf-valrow-fill, .kpi-avg-fill, .pj-bar-fill { height: 100%; border-radius: var(--radius-pill); }
.pb-bar-fill, .perf-valrow-fill, .pj-bar-fill { transition: width 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
/* filter pills — quiet pill chassis, INK inversion when active */
.pj-stage, .doclib-pill, .btn-pill, .qa-acc-pill {
    border: none; border-radius: var(--radius-pill);
    font-family: inherit;
    font-weight: var(--fw-semibold); letter-spacing: 0.01em; white-space: nowrap;
    cursor: pointer; transition: background 0.16s ease, color 0.16s ease, transform 0.16s ease;
}
.pj-stage.active, .doclib-pill.active, .btn-pill.active, .qa-acc-pill.active { background: var(--text-main); color: var(--bg-card); }
/* icon-only round buttons — one chassis (size/colour stay per component) */
.action-icon-btn, .arrow-btn, .pj-sort-btn {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    padding: 0; border: none; background: transparent; cursor: pointer;
    border-radius: var(--radius-full);
}