/* photos-manager.css (v2) — shared frontend styles for photos-service consumers.
*
* Loaded by presbytere & geneafan (and any future app) via:
*
*
* THEMING CONTRACT
* ----------------
* Every consumer owns its own look by overriding `--pm-*` custom properties.
* This file declares NO `:root{}` block on purpose: each themeable value is
* expressed as `var(--pm-x, )` where the default lives ONLY in the
* fallback. Consumers retheme by declaring the variables on :root/html, which
* always wins (no competing declaration here) AND cascades to the lightbox /
* dialogs that the module appends to (outside the mount container).
*
* The defaults below reproduce the historical beige/brown theme verbatim, so
* a consumer that sets nothing (e.g. presbytere) looks exactly as before.
*
* All class names are prefixed `pm-` to avoid any collision with the host
* app's own CSS / Bootstrap. The mount root carries `.pm-root` so bare
* element selectors (main, h1) stay scoped and never bleed onto the host.
* (Data-driven entity-type modifiers — .projet, .piece, … — stay unprefixed
* since they mirror server-supplied values.)
*/
.pm-root { font-family: var(--pm-font, inherit); }
.pm-root main { max-width: var(--pm-max-width, 1100px); margin: 0 auto; padding: 0 1rem 5rem; background: var(--pm-bg, transparent); }
.pm-root h1 { font-size: clamp(1.5rem, 4vw, 2.25rem); font-weight: 400; letter-spacing: 0.03em; margin: 1rem 0 0.5rem; color: var(--pm-heading, var(--pm-text, #2c2c2c)); }
.pm-subtitle { color: var(--pm-text-muted, #6b6b6b); font-style: italic; font-size: 0.9rem; margin-bottom: 1.25rem; }
.pm-toolbar { display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; align-items: center; margin-bottom: 1rem; }
.pm-toolbar select, .pm-toolbar button { font: inherit; padding: 0.5rem 0.85rem; border: 1px solid var(--pm-border, #d8d2c6); border-radius: var(--pm-radius, 4px); background: var(--pm-surface, #fff); color: var(--pm-text, #2c2c2c); }
.pm-toolbar button.pm-primary { background: var(--pm-accent, #b8a88a); border-color: var(--pm-accent, #b8a88a); color: var(--pm-accent-contrast, #fff); cursor: pointer; }
.pm-toolbar button.pm-primary:hover { background: var(--pm-accent-hover, #a89a7e); border-color: var(--pm-accent-hover, #a89a7e); }
.pm-toolbar .pm-grow { flex: 1; }
.pm-toolbar label { font-size: 0.78rem; color: var(--pm-text-muted, #6b6b6b); text-transform: uppercase; letter-spacing: 0.08em; }
.pm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--tile-min, 140px), 1fr)); gap: var(--pm-gap, 0.5rem); }
.pm-grid.pm-pinching { touch-action: none; user-select: none; }
.pm-grid-section-title { grid-column: 1 / -1; margin: 1rem 0 0.25rem; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--pm-text-muted, #6b6b6b); font-weight: 500; display: flex; align-items: baseline; gap: 0.5rem; }
.pm-grid-section-title:first-child { margin-top: 0; }
.pm-grid-section-title .pm-count { font-size: 0.7rem; color: var(--pm-accent, #b8a88a); letter-spacing: 0; text-transform: none; font-weight: 400; }
/* content-visibility:auto tells the browser to skip layout / paint / decode
for tiles outside the viewport. Coupled with contain-intrinsic-size so the
scroll bar / scroll position stays accurate. Reduces decoded-image RAM
and CPU on long galleries. Falls back gracefully on browsers without
support (the property is just ignored). */
.pm-tile { position: relative; aspect-ratio: 1; background: var(--pm-tile-bg, #f0ebe2); border-radius: var(--pm-tile-radius, 4px); overflow: hidden; cursor: pointer; border: 0; padding: 0;
content-visibility: auto; contain-intrinsic-size: var(--tile-min, 140px) var(--tile-min, 140px);
box-shadow: var(--pm-tile-shadow, 0 0 0 0 transparent); transition: box-shadow .12s, transform .12s; }
.pm-tile:hover { box-shadow: var(--pm-tile-shadow-hover, var(--pm-tile-shadow, 0 0 0 0 transparent)); transform: var(--pm-tile-hover-transform, none); }
/* Lot 6.M4 — face detection status liseret. Uses box-shadow rather than
`border` so the existing aspect-ratio:1 isn't shifted by 4 px. The
colored ring sits OUTSIDE the tile content (inset:false). Three states:
- red : photo never analysed (face_detection_at = null)
- orange : analysed, faces detected, none/partial bound to a person
- green : analysed, faces detected, ALL bound
- (none) : analysed but zero faces detected — silent, no ring */
.pm-tile.pm-face-unanalyzed { box-shadow: 0 0 0 3px var(--pm-face-unanalyzed, #e53935); }
.pm-tile.pm-face-unmatched { box-shadow: 0 0 0 3px var(--pm-face-unmatched, #fb8c00); }
.pm-tile.pm-face-all-matched { box-shadow: 0 0 0 3px var(--pm-face-matched, #43a047); }
/* Lot 6.M5 — active person filter banner shown above the grid. */
#person-filter-banner {
display: flex; align-items: center; justify-content: space-between;
gap: 12px; margin: 8px 0 12px;
padding: 8px 14px; border-radius: var(--pm-radius-lg, 6px);
background: var(--pm-info-bg, #e8f5e9); color: var(--pm-info-text, #1b5e20); border: 1px solid var(--pm-info-border, #c8e6c9);
font-size: 14px;
}
#person-filter-banner[hidden] { display: none; }
#person-filter-banner button {
background: transparent; color: var(--pm-info-text, #1b5e20); border: 1px solid var(--pm-info-border, #1b5e2055);
padding: 4px 10px; border-radius: var(--pm-radius, 4px); cursor: pointer; font: inherit;
}
#person-filter-banner button:hover { background: var(--pm-info-border, #c8e6c9); }
.pm-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .2s; }
.pm-tile:hover img { transform: scale(1.04); }
.pm-tile .pm-caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 0.4rem 0.5rem; background: linear-gradient(transparent, rgba(0,0,0,0.55)); color: #fff; font-size: 0.72rem; line-height: 1.2; text-align: left; pointer-events: none; }
.pm-tile .pm-badges { position: absolute; top: 0.35rem; left: 0.35rem; display: flex; gap: 0.25rem; }
.pm-tile .pm-badges span { display: inline-block; background: rgba(255,255,255,0.85); color: #6b6b6b; font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.06em; padding: 0.1rem 0.4rem; border-radius: 8px; }
.pm-tile .pm-badges span.pm-public { background: var(--pm-badge-public-bg, rgba(184,168,138,0.9)); color: #fff; }
.pm-tile .pm-badges span.pm-gallery { background: var(--pm-badge-gallery-bg, rgba(46,83,130,0.85)); color: #fff; }
.pm-tile.pm-video { background: #2c2c2c; color: #fff; }
.pm-tile.pm-video .pm-video-thumb { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; flex-direction: column; gap: 0.5rem; color: #d8d2c6; }
.pm-tile.pm-video .pm-video-thumb svg { width: 38px; height: 38px; opacity: 0.85; }
.pm-tile.pm-video .pm-video-thumb .pm-duration { font-size: 0.75rem; opacity: 0.85; }
.pm-tile.pm-video .pm-video-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.4rem; background: linear-gradient(transparent 30%, rgba(0,0,0,0.45)); color: #fff; pointer-events: none; }
.pm-tile.pm-video .pm-video-overlay svg { width: 38px; height: 38px; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5)); }
.pm-tile.pm-video .pm-video-overlay .pm-duration { font-size: 0.75rem; background: rgba(0,0,0,0.55); padding: 0.1rem 0.4rem; border-radius: 4px; }
.pm-info-btn { position: absolute; bottom: 0.3rem; right: 0.3rem; appearance: none; -webkit-appearance: none; background: rgba(255,255,255,0.85); border: 0; border-radius: 50%; width: 22px; height: 22px; padding: 0; display: flex; align-items: center; justify-content: center; color: #6b6b6b; cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,0.2); z-index: 3; font-size: 0.72rem; font-weight: 600; font-style: italic; line-height: 1; opacity: 0.75; transition: opacity 0.15s; }
.pm-tile:hover .pm-info-btn { opacity: 1; }
.pm-info-btn:hover, .pm-info-btn:focus-visible { background: #fff; color: #2c2c2c; outline: 0; opacity: 1; }
.pm-tile .pm-caption { padding-right: 2rem; }
body.pm-select-mode .pm-info-btn { display: none; }
.pm-tile.pm-selected { outline: 3px solid var(--pm-accent, #b8a88a); outline-offset: -3px; }
.pm-tile.pm-selected::after { content: '✓'; position: absolute; top: 0.4rem; left: 0.4rem; width: 28px; height: 28px; background: var(--pm-accent, #b8a88a); color: var(--pm-accent-contrast, #fff); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1rem; font-weight: 600; z-index: 4; }
body.pm-select-mode .pm-tile .pm-badges { display: none; }
.pm-select-bar { position: fixed; left: 0; right: 0; bottom: 0; background: #2c2c2c; color: #fff; padding: 0.75rem 1rem; display: none; align-items: center; gap: 0.5rem; z-index: 50; box-shadow: 0 -4px 12px rgba(0,0,0,0.25); }
.pm-select-bar.pm-visible { display: flex; }
.pm-select-bar .pm-count { font-size: 0.9rem; }
.pm-select-bar .pm-grow { flex: 1; }
.pm-select-bar button { font: inherit; padding: 0.5rem 0.85rem; border: 0; border-radius: var(--pm-radius, 4px); background: rgba(255,255,255,0.12); color: #fff; cursor: pointer; }
.pm-select-bar button:hover { background: rgba(255,255,255,0.2); }
.pm-select-bar button.pm-danger { background: var(--pm-danger, #b04040); }
.pm-select-bar button.pm-danger:hover { background: var(--pm-danger-hover, #c25050); }
.pm-select-bar button:disabled { opacity: 0.4; cursor: default; }
/* z-index must clear the host app's chrome (geneafan's nav/header tops out
~10001) so the overlay covers the menu bar in reverse-proxy/standalone
mode. In iframe fullscreen the element is in the top-layer, so this is
moot there. Descendants (face picker z-index:1100) stack within this
context, so they stay correctly above the lightbox content. */
.pm-lightbox { position: fixed; inset: 0; background: rgba(0,0,0,0.92); display: none; align-items: center; justify-content: center; z-index: 2147483000; touch-action: none; }
.pm-lightbox.pm-open { display: flex; }
.pm-lightbox:fullscreen { background: #000; }
.pm-lightbox .pm-lb-stage { width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.pm-lightbox .pm-lb-stage img, .pm-lightbox .pm-lb-stage video { max-width: 100vw; max-height: 100vh; object-fit: contain; display: block; transform-origin: center; will-change: transform; }
.pm-lightbox .pm-lb-stage iframe { width: min(100vw, 1280px); height: min(85vh, 720px); border: 0; }
/* Read-only details overlay at the bottom: title / caption / date / chips on
the left, "i / N" counter on the right. */
.pm-lightbox .pm-lb-caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 1rem 1.25rem; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,0.82)); font-family: var(--pm-font, inherit); font-size: 0.9rem; line-height: 1.4; pointer-events: none; display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; }
.pm-lightbox .pm-lb-caption .pm-title { font-weight: 600; margin-bottom: 0.15rem; }
.pm-lightbox .pm-lb-cap-text { font-size: 0.85rem; opacity: 0.92; }
.pm-lightbox .pm-lb-date { font-size: 0.78rem; opacity: 0.82; margin-top: 0.25rem; }
.pm-lightbox .pm-lb-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.5rem; }
.pm-lightbox .pm-lb-chip { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.15rem 0.55rem; border-radius: 999px; font-size: 0.74rem; line-height: 1.5; background: rgba(255,255,255,0.16); color: #fff; white-space: nowrap; }
.pm-lightbox .pm-lb-counter { flex: 0 0 auto; opacity: 0.7; font-size: 0.78rem; white-space: nowrap; }
/* Controls aligned with the app theme (plum --pm-accent bg + gold
--pm-accent-contrast text). Toolbars group buttons top-left / top-right. */
.pm-lightbox button { appearance: none; -webkit-appearance: none; background: var(--pm-accent, #32273b); color: var(--pm-accent-contrast, #c8a47e); border: 0; cursor: pointer; font: inherit; z-index: 10; }
.pm-lightbox button:hover, .pm-lightbox button:focus-visible { background: var(--pm-accent-hover, #4a3a56); outline: 0; }
.pm-lightbox .pm-lb-toolbar { position: absolute; top: 1rem; display: flex; align-items: center; gap: 0.5rem; z-index: 11; }
.pm-lightbox .pm-lb-toolbar-left { left: 1rem; }
.pm-lightbox .pm-lb-toolbar-right { right: 1rem; }
.pm-lightbox .pm-lb-close, .pm-lightbox .pm-lb-fullscreen { width: 40px; height: 40px; border-radius: 50%; line-height: 1; padding: 0; }
.pm-lightbox .pm-lb-close { font-size: 1.4rem; }
.pm-lightbox .pm-lb-fullscreen { font-size: 1.15rem; }
.pm-lightbox .pm-lb-faces-toggle { padding: 0.5rem 0.85rem; border-radius: var(--pm-radius, 4px); font-size: 0.8rem; line-height: 1; }
.pm-lightbox .pm-lb-faces-toggle.pm-off { opacity: 0.55; }
.pm-lightbox.pm-lb-faces-off .pm-lb-face-overlay { display: none; }
.pm-lightbox .pm-lb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 64px; font-size: 2rem; line-height: 1; padding: 0; border-radius: var(--pm-radius, 4px); }
.pm-lightbox .pm-lb-prev { left: 0.5rem; }
.pm-lightbox .pm-lb-next { right: 0.5rem; }
.pm-lightbox .pm-lb-nav:disabled { opacity: 0.3; cursor: default; }
@media (max-width: 600px) { .pm-lightbox .pm-lb-nav { width: 40px; height: 56px; font-size: 1.6rem; } }
.pm-tabs { display: flex; align-items: center; gap: 0.25rem; border-bottom: 1px solid var(--pm-border-soft, #ece6d9); margin-bottom: 1rem; }
.pm-tabs .pm-tab { font: inherit; background: transparent; border: 0; padding: 0.6rem 1rem; cursor: pointer; color: var(--pm-text-muted, #6b6b6b); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.pm-tabs .pm-tab.pm-active { color: var(--pm-text, #2c2c2c); border-bottom-color: var(--pm-accent, #b8a88a); }
.pm-tabs .pm-grow { flex: 1; }
.pm-tabs .pm-save-state { font-size: 0.78rem; color: var(--pm-accent, #b8a88a); padding-right: 0.5rem; font-style: italic; }
.pm-hint { color: var(--pm-text-muted, #6b6b6b); font-size: 0.85rem; margin: 0 0 1rem; font-style: italic; }
/* compactHeader mode — Photos/Galerie tabs + count + filter toolbar folded
into a single flex-wrap row (set by mountPhotosManager when the host passes
compactHeader:true). Wraps to multiple rows on narrow viewports. */
.pm-tabs.pm-header { flex-wrap: wrap; gap: 0.4rem 0.75rem; }
.pm-header-count { margin: 0; font-style: normal; font-size: 0.8rem; color: var(--pm-text-muted, #6b6b6b); white-space: nowrap; }
.pm-toolbar-inline { flex: 1 1 280px; margin: 0; padding: 0; border: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.6rem; }
.pm-toolbar-inline > select { min-width: 0; }
/* Narrow viewports: filter selects share the row evenly (2-up; the odd one
stretches full) and the action buttons land on a tidy bottom row instead of
ragged wrapping. Targets `.pm-toolbar` so it fixes BOTH the in-pane toolbar
(default layout, e.g. presbytere) and the folded compact header (geneafan).
The `.pm-grow` becomes a full-width zero-height line break. */
@media (max-width: 680px) {
.pm-toolbar > select { flex: 1 1 45%; min-width: 0; }
.pm-toolbar > .pm-grow { flex-basis: 100%; height: 0; }
.pm-toolbar > button { flex: 1 1 auto; }
/* compact: the folded toolbar drops onto its own full-width row under the tabs */
.pm-tabs.pm-header { gap: 0.5rem 0.6rem; }
.pm-tabs.pm-header .pm-toolbar-inline { flex-basis: 100%; }
}
/* Segmented filter controls (compact mode) — replace the long visibility /
gallery dropdowns with themed pill groups. Declared after `.pm-toolbar button`
so these win over the generic toolbar-button styling. */
.pm-seg-group { display: inline-flex; align-items: center; gap: 0.3rem; }
.pm-seg-ico { font-size: 0.9rem; line-height: 1; opacity: 0.65; }
.pm-seg { display: inline-flex; border: 1px solid var(--pm-border, #d8d2c6); border-radius: var(--pm-radius, 4px); overflow: hidden; }
.pm-seg button { font: inherit; font-size: 0.78rem; padding: 0.32rem 0.55rem; margin: 0; border: 0; border-left: 1px solid var(--pm-border, #d8d2c6); border-radius: 0; background: var(--pm-surface, #fff); color: var(--pm-text-muted, #6b6b6b); cursor: pointer; white-space: nowrap; }
.pm-seg button:first-child { border-left: 0; }
.pm-seg button:hover:not(.pm-seg-on) { background: var(--pm-tile-bg, #f0ebe2); }
.pm-seg button.pm-seg-on { background: var(--pm-accent, #b8a88a); color: var(--pm-accent-contrast, #fff); }
.pm-grid-sortable .pm-tile { cursor: default; }
.pm-grid-sortable .pm-tile.pm-dragging { opacity: 0.4; }
.pm-grid-sortable .pm-tile::before { content: attr(data-order); position: absolute; top: 0.35rem; right: 0.35rem; background: rgba(255,255,255,0.85); color: #6b6b6b; font-size: 0.65rem; padding: 0.1rem 0.4rem; border-radius: 8px; pointer-events: none; z-index: 2; }
.pm-drag-handle { appearance: none; -webkit-appearance: none; position: absolute; bottom: 0.3rem; right: 0.3rem; width: 30px; height: 30px; background: #fff; border: 1px solid var(--pm-border, #d8d2c6); border-radius: var(--pm-radius, 4px); cursor: grab; touch-action: none; line-height: 0; color: #2c2c2c; padding: 0; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 3px rgba(0,0,0,0.2); z-index: 3; user-select: none; -webkit-user-select: none; }
.pm-drag-handle svg { display: block; width: 16px; height: 16px; }
.pm-drag-handle:hover, .pm-drag-handle:focus-visible { background: #fff; color: #2c2c2c; outline: 0; }
.pm-drag-handle:active { cursor: grabbing; }
.pm-grid-sortable.pm-saving { pointer-events: none; opacity: 0.7; }
.pm-empty { color: #bbb; font-style: italic; padding: 2rem; text-align: center; }
.pm-dlg { position: fixed; inset: 0; background: rgba(0,0,0,0.55); display: none; align-items: flex-start; justify-content: center; padding: 1.5rem; z-index: 100; overflow-y: auto; }
.pm-dlg.pm-open { display: flex; }
/* margin:auto centers the panel vertically when it fits, and degrades to a
scrollable overlay (no top-clipping) when the content is taller than the
viewport — unlike align-items:center. Keeps the modal off the menu bar. */
.pm-dlg .pm-panel { background: var(--pm-surface, #fff); border-radius: var(--pm-radius-lg, 6px); max-width: 720px; width: 100%; padding: 1.25rem; box-shadow: var(--pm-shadow-modal, 0 8px 32px rgba(0,0,0,0.2)); margin: auto; }
.pm-dlg h2 { font-size: 1.1rem; font-weight: 500; margin: 0 0 0.75rem; color: var(--pm-heading, var(--pm-text, #2c2c2c)); }
.pm-dlg .pm-row { display: flex; gap: 0.5rem; margin-bottom: 0.6rem; align-items: center; }
.pm-dlg label { font-size: 0.78rem; color: var(--pm-text-muted, #6b6b6b); text-transform: uppercase; letter-spacing: 0.08em; flex: 0 0 130px; }
.pm-dlg input[type=text], .pm-dlg input[type=number], .pm-dlg input[type=date], .pm-dlg textarea, .pm-dlg select { font: inherit; padding: 0.45rem 0.6rem; border: 1px solid var(--pm-border, #d8d2c6); border-radius: var(--pm-radius-sm, 3px); background: var(--pm-surface, #fff); flex: 1; min-width: 0; }
.pm-dlg textarea { resize: vertical; min-height: 70px; }
.pm-dlg .pm-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 1rem; padding-top: 0.75rem; border-top: 1px solid var(--pm-border-soft, #ece6d9); }
.pm-dlg .pm-actions button { font: inherit; padding: 0.5rem 1rem; border: 1px solid var(--pm-border, #d8d2c6); border-radius: var(--pm-radius, 4px); background: var(--pm-surface, #fff); cursor: pointer; }
.pm-dlg .pm-actions button.pm-primary { background: var(--pm-accent, #b8a88a); border-color: var(--pm-accent, #b8a88a); color: var(--pm-accent-contrast, #fff); }
.pm-dlg .pm-actions button.pm-danger { color: var(--pm-danger, #b04040); }
.pm-dlg .pm-actions .pm-grow { flex: 1; }
/* Detail-modal header: inline-editable title (left) + icon actions (right),
close (×) furthest right. Keeping the title on the icon row frees the media
column for the photo + caption, which centers the photo vertically. */
.pm-detail-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; }
.pm-detail-head .pm-editable-title { flex: 1; min-width: 0; margin: 0; }
.pm-detail-head .pm-editable-display { flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-detail-actions { display: flex; align-items: center; gap: 0.4rem; flex-shrink: 0; }
.pm-detail-actions .pm-detail-close { margin-left: 0.3rem; }
/* Icon-only action buttons (square, centered glyph) with title tooltips. */
.pm-dlg button.pm-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 2.3rem; height: 2.3rem; padding: 0; font: inherit; border: 1px solid var(--pm-border, #d8d2c6); border-radius: var(--pm-radius, 4px); background: var(--pm-surface, #fff); color: inherit; cursor: pointer; }
.pm-dlg button.pm-icon-btn svg { width: 1.05rem; height: 1.05rem; display: block; }
.pm-dlg button.pm-icon-btn.pm-primary { background: var(--pm-accent, #b8a88a); border-color: var(--pm-accent, #b8a88a); color: var(--pm-accent-contrast, #fff); }
.pm-dlg button.pm-icon-btn.pm-danger { color: var(--pm-danger, #b04040); }
.pm-dlg button.pm-icon-btn:hover { background: var(--pm-surface-soft, #faf8f5); }
.pm-dlg button.pm-icon-btn.pm-primary:hover { background: var(--pm-accent-hover, #a59071); border-color: var(--pm-accent-hover, #a59071); }
.pm-dlg button.pm-icon-btn.pm-danger:hover { background: var(--pm-danger, #b04040); color: var(--pm-accent-contrast, #fff); border-color: var(--pm-danger, #b04040); }
/* Compact icon buttons inside form rows (e.g. the "link" button by the Liens label). */
.pm-detail-form .pm-row .pm-icon-btn { width: 1.9rem; height: 1.9rem; flex: 0 0 auto; }
.pm-row-liens { align-items: flex-start; }
/* Inline-editable title (above photo) and caption (below photo): read-only
text + pencil by default, swap to an input/textarea on edit. */
.pm-editable { display: flex; align-items: flex-start; gap: 0.4rem; }
.pm-editable-title { margin-bottom: 0.5rem; }
.pm-editable-caption { margin-top: 0.6rem; }
.pm-editable-display { flex: 1; min-width: 0; cursor: text; word-break: break-word; padding: 0.2rem 0; }
.pm-editable-title .pm-editable-display { font-size: 1.15rem; font-weight: 500; color: var(--pm-heading, var(--pm-text, #2c2c2c)); }
.pm-editable-caption .pm-editable-display { font-size: 0.9rem; color: var(--pm-text, #2c2c2c); white-space: pre-wrap; }
.pm-editable-display.pm-editable-empty { color: var(--pm-text-muted, #9a9a9a); font-style: italic; font-weight: 400; }
.pm-editable input, .pm-editable textarea { flex: 1; min-width: 0; font: inherit; padding: 0.35rem 0.5rem; border: 1px solid var(--pm-border, #d8d2c6); border-radius: var(--pm-radius-sm, 3px); background: var(--pm-surface, #fff); }
.pm-editable-title input { font-size: 1.15rem; font-weight: 500; }
.pm-editable-caption textarea { min-height: 60px; resize: vertical; }
.pm-edit-pencil { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 1.9rem; height: 1.9rem; padding: 0; border: 1px solid transparent; border-radius: var(--pm-radius, 4px); background: none; color: var(--pm-text-muted, #6b6b6b); cursor: pointer; }
.pm-edit-pencil:hover { background: var(--pm-surface-soft, #faf8f5); color: var(--pm-text, #2c2c2c); }
.pm-edit-pencil svg { width: 0.95rem; height: 0.95rem; display: block; }
.pm-editing .pm-edit-pencil { color: var(--pm-accent, #b8a88a); }
.pm-detail-img { width: 100%; max-height: 50vh; object-fit: contain; background: var(--pm-tile-bg, #f0ebe2); border-radius: var(--pm-radius, 4px); margin-bottom: 0; aspect-ratio: 4 / 3; }
@media (min-width: 820px) { .pm-detail-img { max-height: 70vh; } }
.pm-detail-grid { display: flex; flex-direction: column; gap: 0.5rem; }
.pm-detail-media { display: flex; flex-direction: column; }
.pm-detail-form { display: flex; flex-direction: column; gap: 0.6rem; }
@media (min-width: 820px) {
.pm-dlg .pm-detail-panel { max-width: 1100px; }
.pm-detail-grid { flex-direction: row; align-items: flex-start; gap: 1.25rem; }
.pm-detail-media { flex: 1; min-width: 0; }
.pm-detail-form { flex: 0 0 360px; }
}
.pm-exif-strip { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; padding: 0.5rem 0.75rem; margin-bottom: 0.75rem; background: var(--pm-surface-soft, #faf8f5); border-radius: var(--pm-radius, 4px); font-size: 0.78rem; color: var(--pm-text-muted, #6b6b6b); }
.pm-detail-form .pm-exif-strip { margin-bottom: 0; }
.pm-exif-strip span { white-space: nowrap; }
.pm-exif-strip a { color: var(--pm-link, #2e5382); text-decoration: none; }
.pm-exif-strip a:hover { text-decoration: underline; }
.pm-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; min-height: 2rem; }
.pm-chip { display: inline-flex; align-items: center; gap: 0.4rem; background: var(--pm-tile-bg, #f0ebe2); border-radius: 12px; padding: 0.25rem 0.6rem; font-size: 0.78rem; }
.pm-chip .pm-x { background: none; border: none; cursor: pointer; color: #6b6b6b; padding: 0; font-size: 1rem; line-height: 1; }
/* Default chip palette — data-driven entity-type modifiers stay unprefixed. */
.pm-chip.projet { background: #dde7f3; color: #2e5382; }
.pm-chip.piece { background: #efe0cf; color: #70512d; }
.pm-chip.evenement { background: #dcefd4; color: #3f6b2e; }
.pm-chip.personne { background: #dde7f3; color: #2e5382; }
.pm-chip.famille { background: #efe0cf; color: #70512d; }
.pm-chip.lieu { background: #dcefd4; color: #3f6b2e; }
.pm-chip.source { background: #f0e7d4; color: #70653b; }
/* Read-only meta values (Lieu GPS link, Fichier, Origine). */
.pm-meta-val { font-size: 0.82rem; color: var(--pm-text-muted, #6b6b6b); word-break: break-word; }
.pm-meta-val a { color: var(--pm-link, #2e5382); text-decoration: none; }
.pm-meta-val a:hover { text-decoration: underline; }
/* 🗺️ Google-Maps link next to the editable place field. */
.pm-map-link { flex: 0 0 auto; text-decoration: none; font-size: 1.1rem; line-height: 1; padding: 0 0.2rem; }
/* Place autocomplete: input + suggestions dropdown. */
.pm-place-wrap { position: relative; flex: 1; min-width: 0; }
.pm-place-wrap input { width: 100%; box-sizing: border-box; }
.pm-place-suggest { position: absolute; top: 100%; left: 0; right: 0; z-index: 20; background: var(--pm-surface, #fff); border: 1px solid var(--pm-border, #d8d2c6); border-top: 0; border-radius: 0 0 var(--pm-radius-sm, 3px) var(--pm-radius-sm, 3px); box-shadow: 0 6px 18px rgba(0,0,0,0.14); max-height: 220px; overflow-y: auto; }
.pm-place-opt { display: block; width: 100%; text-align: left; padding: 0.4rem 0.6rem; border: 0; background: none; font: inherit; cursor: pointer; color: var(--pm-text, #2c2c2c); }
.pm-place-opt:hover { background: var(--pm-surface-soft, #faf8f5); }
/* Piste 1 — contextual event picker (one select per associated person). */
.pm-events { display: flex; flex-direction: column; gap: 0.4rem; }
.pm-event-pick { display: flex; align-items: center; gap: 0.5rem; }
.pm-event-pick .pm-event-person { font-size: 0.82rem; color: var(--pm-text, #2c2c2c); flex: 0 0 auto; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-event-pick select { flex: 1; min-width: 0; }
.pm-upload-list { max-height: 50vh; overflow-y: auto; margin: 0.75rem 0; }
.pm-upload-item { display: grid; grid-template-columns: 60px 1fr auto; gap: 0.6rem; align-items: center; padding: 0.4rem 0; border-bottom: 1px solid var(--pm-border-soft, #ece6d9); }
.pm-upload-item .pm-thumb { width: 60px; height: 60px; background: var(--pm-tile-bg, #f0ebe2); border-radius: var(--pm-radius-sm, 3px); display: flex; align-items: center; justify-content: center; font-size: 0.7rem; color: #999; overflow: hidden; }
.pm-upload-item .pm-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pm-upload-item .pm-name { font-size: 0.85rem; word-break: break-all; }
.pm-upload-item .pm-size { font-size: 0.72rem; color: #999; }
.pm-upload-item .pm-status { font-size: 0.78rem; color: var(--pm-text-muted, #6b6b6b); min-width: 90px; text-align: right; }
.pm-upload-item.pm-ok .pm-status { color: #3f6b2e; }
.pm-upload-item.pm-err .pm-status { color: var(--pm-danger, #b04040); }
.pm-upload-item .pm-progress { grid-column: 2 / -1; height: 4px; background: var(--pm-border-soft, #ece6d9); border-radius: 2px; overflow: hidden; }
.pm-upload-item .pm-progress > .pm-bar { height: 100%; background: var(--pm-accent, #b8a88a); transition: width 0.2s ease; width: 0%; }
.pm-upload-item.pm-ok .pm-progress > .pm-bar { background: #3f6b2e; }
.pm-upload-item.pm-err .pm-progress > .pm-bar { background: var(--pm-danger, #b04040); }
.pm-attach-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 0.4rem; margin-bottom: 0.75rem; }
.pm-attach-photos .pm-thumb { aspect-ratio: 1; background: var(--pm-tile-bg, #f0ebe2); border-radius: var(--pm-radius-sm, 3px); overflow: hidden; }
.pm-attach-photos .pm-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pm-entity-picker { max-height: 38vh; overflow-y: auto; border: 1px solid var(--pm-border-soft, #ece6d9); border-radius: var(--pm-radius, 4px); padding: 0.4rem 0.6rem; }
.pm-entity-group { margin-bottom: 0.5rem; }
.pm-entity-group h3 { font-size: 0.7rem; color: var(--pm-accent, #b8a88a); text-transform: uppercase; letter-spacing: 0.15em; margin: 0.5rem 0 0.3rem; font-weight: 400; }
.pm-entity-row { display: flex; align-items: center; gap: 0.4rem; padding: 0.25rem 0; }
.pm-entity-row label { flex: 1; font-size: 0.85rem; cursor: pointer; }
/* Callback catalogs (geneafan: individus / lieux / sources) — type-ahead. */
.pm-entity-search { width: 100%; box-sizing: border-box; padding: 0.35rem 0.5rem; font: inherit; font-size: 0.85rem; border: 1px solid var(--pm-border-soft, #ece6d9); border-radius: var(--pm-radius, 4px); }
.pm-entity-results { display: flex; flex-direction: column; max-height: 11rem; overflow-y: auto; margin-top: 0.25rem; }
.pm-entity-results:empty { display: none; }
.pm-entity-result { text-align: left; background: none; border: none; border-radius: var(--pm-radius, 4px); padding: 0.3rem 0.45rem; font: inherit; font-size: 0.85rem; cursor: pointer; color: inherit; }
.pm-entity-result:hover { background: var(--pm-tile-bg, #f0ebe2); }
.pm-entity-empty { font-size: 0.8rem; color: #999; padding: 0.3rem 0.45rem; }
.pm-entity-selected { margin-top: 0.35rem; }
.pm-entity-selected:empty { display: none; }
/* Display-only chip derived from a face binding (no detach button — the
binding is managed from the lightbox face picker). Subtly de-emphasised. */
.pm-chip-face { font-style: italic; cursor: default; }
/* Lot 6 Phase 2 — "À confirmer" review queue. */
.pm-tabs .pm-tab .pm-review-badge { display: inline-block; min-width: 1.2em; padding: 0 0.35em;
margin-left: 0.3em; border-radius: 999px; font-size: 0.72rem; line-height: 1.5;
background: var(--pm-accent, #b8a88a); color: var(--pm-accent-contrast, #fff); text-align: center; }
.pm-review-group { margin-bottom: 1.4rem; }
.pm-review-person { font-size: 0.95rem; font-weight: 500; color: var(--pm-heading, #32273b);
margin: 0 0 0.6rem; display: flex; align-items: center; gap: 0.5rem; }
.pm-review-person .pm-review-n { font-size: 0.72rem; color: var(--pm-text-muted, #6b6b6b);
background: var(--pm-tile-bg, #f0ebe2); border-radius: 999px; padding: 0 0.5em; font-weight: 400; }
.pm-review-cards { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.pm-review-card { width: 120px; border: 1px solid var(--pm-border-soft, #ece6d9);
border-radius: var(--pm-radius, 4px); overflow: hidden; background: #fff; }
.pm-review-thumb { width: 120px; height: 120px; background: #eee center/cover no-repeat; }
.pm-review-sim { font-size: 0.72rem; color: #1b5e20; text-align: center; padding: 0.25rem 0; }
.pm-review-actions { display: flex; border-top: 1px solid var(--pm-border-soft, #ece6d9); }
.pm-review-actions button { flex: 1; font: inherit; font-size: 0.78rem; padding: 0.4rem 0; border: 0;
cursor: pointer; background: #fff; }
.pm-review-actions .pm-review-yes { color: #1b5e20; border-right: 1px solid var(--pm-border-soft, #ece6d9); }
.pm-review-actions .pm-review-yes:hover { background: #e8f5e9; }
.pm-review-actions .pm-review-no { color: #b23b3b; }
.pm-review-actions .pm-review-no:hover { background: #fbe9e9; }