/*
 * Givre components (resources/views/components/ui/*, components.js).
 * Extends the Neo Elite kit (assets/ui/theme.css) only where the kit has no class. Kit tokens only.
 */

/* ------------------------------------------------------------------ forms */

.invalid-feedback.d-block {
    margin-top: 0.375rem;
}

/* Tom Select (select[data-pv-select], see core.js): looks like the kit's .form-select, light and dark.
   The wrapper keeps the original select classes, so it carries the kit field box; the control is transparent. */
.ts-wrapper.form-select,
.ts-wrapper.form-control {
    min-height: calc(1.3125rem + 0.875rem + 2px);
    cursor: pointer;
}

.ts-wrapper.form-select.form-select-sm,
.ts-wrapper.form-control.form-control-sm {
    min-height: calc(1.21875rem + 0.625rem + 2px);
}

.ts-wrapper.form-select.focus,
.ts-wrapper.form-select.dropdown-active,
.ts-wrapper.form-control.focus {
    border-color: var(--ui-focus-border);
    background-color: var(--ui-input-bg-focus);
    box-shadow: var(--ui-focus-ring);
}

.ts-wrapper.form-select.is-invalid.focus {
    box-shadow: 0 0 0 3px rgba(var(--bs-danger-rgb), 0.2);
}

.ts-wrapper.form-select.disabled {
    background-color: var(--ui-hover);
    color: var(--bs-secondary-color);
    box-shadow: none;
}

.ts-wrapper .ts-control,
.ts-wrapper .ts-control input,
.form-select .ts-control,
.form-select .ts-control input {
    color: var(--bs-emphasis-color);
    font-size: inherit;
    line-height: 1.5;
}

.ts-wrapper .ts-control {
    padding-top: 0.4375rem;
    padding-bottom: 0.4375rem;
    padding-left: 0.75rem;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.ts-wrapper.form-select-sm .ts-control {
    padding-top: 0.3125rem;
    padding-bottom: 0.3125rem;
    font-size: 0.8125rem;
}

.ts-wrapper .ts-control input::placeholder,
.ts-wrapper.single .ts-control > .item:empty::before {
    color: var(--bs-tertiary-color);
    opacity: 1;
}

.ts-wrapper.single .ts-control {
    flex-wrap: nowrap;
}

.ts-wrapper.single .ts-control > .item {
    display: block;
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The search caret sits after the value on the same line instead of dropping below it */
.ts-wrapper.single .ts-control > input {
    flex: 1 1 0;
    min-width: 1.5rem;
}

.ts-wrapper.single.pv-select-typing .ts-control > .item {
    display: none;
}

/* Multiple: same pills as the kit's Select2 chips */
.ts-wrapper.multi .ts-control {
    gap: 0.25rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

.ts-wrapper.multi .ts-control > .item {
    margin: 0;
    padding: 0.125rem 0.5rem;
    border: 0;
    border-radius: var(--bs-border-radius-pill);
    background-color: var(--bs-primary-bg-subtle);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bs-primary) 22%, transparent);
    color: var(--bs-primary-text-emphasis);
    font-size: 0.75rem;
    font-weight: 500;
}

/* Dropdown: glass panel like the kit's menus, above modals and offcanvas */
.ts-dropdown,
.ts-dropdown.form-control,
.ts-dropdown.form-select {
    z-index: 2000;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--ui-glass-border);
    border-radius: var(--bs-border-radius-lg);
    background: var(--ui-glass-bg);
    box-shadow: var(--bs-box-shadow);
    color: var(--bs-body-color);
    font-size: 0.875rem;
    -webkit-backdrop-filter: var(--ui-glass-filter);
    backdrop-filter: var(--ui-glass-filter);
}

.ts-dropdown .ts-dropdown-content {
    padding: 0.3125rem;
}

.ts-dropdown .option,
.ts-dropdown .no-results,
.ts-dropdown .create {
    padding: 0.4375rem 0.625rem;
    border-radius: var(--bs-border-radius-sm);
    overflow-wrap: anywhere;
}

.ts-dropdown .option.active,
.ts-dropdown .active {
    background-color: var(--ui-active);
    color: var(--bs-emphasis-color);
}

.ts-dropdown .option.selected {
    background-color: var(--bs-primary-bg-subtle);
    color: var(--bs-primary-text-emphasis);
    font-weight: 500;
}

.ts-dropdown .no-results {
    color: var(--bs-secondary-color);
}

.ts-dropdown .optgroup-header {
    padding: 0.5rem 0.625rem 0.25rem;
    background: transparent;
    color: var(--bs-tertiary-color);
    font-size: 0.75rem;
    font-weight: 500;
}

.ts-dropdown .optgroup::before {
    margin-inline: -0.3125rem;
}

.ts-dropdown [data-selectable] .highlight {
    background: var(--bs-warning-bg-subtle);
    color: inherit;
}

/* ------------------------------------------------------------------ cards, lists, actions */

.pv-card-action {
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.pv-card-action:hover,
.pv-card-action:focus-within {
    border-color: color-mix(in srgb, var(--bs-primary) 45%, var(--bs-border-color));
}

.pv-template-card-image {
    width: 4rem;
    height: 4rem;
    flex: 0 0 4rem;
    object-fit: contain;
}

.pv-quick-action .ui-icon-tile {
    flex-shrink: 0;
}

.pv-option-card:has(input:checked),
.pv-option-card.active {
    border-color: var(--bs-primary);
    background-color: var(--bs-primary-bg-subtle);
    box-shadow: var(--ui-focus-ring);
}

.pv-option-card:has(input:focus-visible) {
    box-shadow: var(--ui-focus-ring);
}

.pv-donut-ring {
    --ui-ring-size: 7rem;
    --ui-ring-thickness: 0.625rem;
}

/* Filter tabs: segmented control that scrolls sideways instead of wrapping on narrow screens */
.pv-filter-tabs {
    display: inline-flex;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
}

.pv-filter-tabs::-webkit-scrollbar {
    display: none;
}

.pv-filter-tabs > .btn {
    flex: 0 0 auto;
    white-space: nowrap;
}

.pv-search {
    min-width: 12rem;
}

.pv-action-bar > .pv-search {
    flex: 1 1 16rem;
    max-width: 28rem;
}

/* ------------------------------------------------------------------ overlays */

.offcanvas.pv-offcanvas {
    --bs-offcanvas-width: 26rem;
}

.offcanvas.pv-offcanvas-lg {
    --bs-offcanvas-width: 38rem;
}

.offcanvas.pv-offcanvas-xl {
    --bs-offcanvas-width: 56rem;
}

@media (max-width: 767.98px) {
    .offcanvas.pv-offcanvas-lg,
    .offcanvas.pv-offcanvas-xl {
        --bs-offcanvas-width: 100vw;
    }
}

/* The header already pads its bottom edge: don't double the gap above the content. */
.pv-offcanvas > .offcanvas-body {
    padding-top: 0.25rem;
}

/* The close button gets focus when the panel opens: only show the ring for keyboard focus. */
.offcanvas-header .btn-close:focus:not(:focus-visible) {
    box-shadow: none;
}

.offcanvas-footer,
.pv-offcanvas > .offcanvas-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.875rem var(--bs-offcanvas-padding-x);
    border-top: 1px solid var(--bs-border-color);
}

/* A card inside a panel is flat: the panel is already the surface (no nested-card look). */
.offcanvas .card,
.modal .card.card-flat {
    --bs-card-bg: transparent;
    --bs-card-border-color: transparent;
    border-width: 0;
    background: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.offcanvas .card > .card-header,
.offcanvas .card > .card-body,
.offcanvas .card > .card-footer {
    padding-inline: 0;
}

.offcanvas .card > .card-header {
    border-bottom-color: var(--bs-border-color);
}

.offcanvas .card > .card-footer {
    background: transparent;
}

@media (min-width: 576px) {
    .modal-dialog.pv-modal-xxl {
        --bs-modal-width: min(1320px, calc(100vw - 2rem));
    }
}

.pv-toasts {
    z-index: 1100;
}

/* ------------------------------------------------------------------ tables */

/* Keyboard-scrollable region (tabindex set by components.js when the table overflows) */
.table-responsive:focus-visible {
    outline: 0;
    box-shadow: inset var(--ui-focus-ring);
}

.pv-table-has-actions > tbody > tr > td:last-child {
    width: 1%;
    text-align: right;
    white-space: nowrap;
}

.pv-table-empty:hover > * {
    --bs-table-hover-bg: transparent;
}

.pv-table-empty > td {
    padding: 0;
}

/* ------------------------------------------------------------------ charts (Chart.js) */

.pv-chart {
    position: relative;
}

.pv-chart-canvas {
    position: relative;
    height: 100%;
}

.pv-chart-center {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    pointer-events: none;
}

/* HTML legend placed in a card header, on the title line */
.pv-chart-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--bs-body-font-size-sm, 0.875rem);
    color: var(--bs-secondary-color);
}

.pv-chart-legend > li {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
}

.pv-chart-legend-swatch {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 2px;
}

/* ------------------------------------------------------------------ file viewer */

.pv-file-viewer {
    min-width: 0;
    overflow: hidden;
}

.pv-file-viewer-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.875rem 1.25rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.pv-file-viewer-title {
    margin: 0.125rem 0;
    color: var(--bs-emphasis-color);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.pv-file-viewer-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8.75rem, 1fr));
    margin: 0;
    border-bottom: 1px solid var(--bs-border-color);
}

.pv-file-viewer-meta > div {
    min-width: 0;
    padding: 0.625rem 1.25rem;
}

.pv-file-viewer-meta dt {
    color: var(--bs-secondary-color);
    font-size: 0.75rem;
    font-weight: 400;
}

.pv-file-viewer-meta dd {
    margin: 0;
    overflow: hidden;
    color: var(--bs-emphasis-color);
    font-size: 0.8125rem;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pv-file-viewer-body {
    display: flex;
    align-items: stretch;
    justify-content: center;
    min-height: min(72vh, 780px);
    overflow: auto;
    background-color: var(--ui-hover);
}

/* Previews that are only as tall as their content do not need the full-height frame */
.pv-file-viewer-body:has(> .pv-file-sheet, > .pv-file-slides, > .pv-file-doc:not(.is-text), > .pv-file-status) {
    min-height: 0;
}

.pv-file-viewer-body > .pv-file-sheet,
.pv-file-viewer-body > .pv-file-slides {
    min-height: 0;
}

.pv-file-viewer.is-compact .pv-file-viewer-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.125rem 0.5rem;
    padding: 0.375rem 0.5rem 0.375rem 1rem;
}

/* Compact header: title and actions first, facts use the full width below. */
.pv-file-viewer-inline {
    display: contents;
}

.pv-file-viewer.is-compact .pv-file-viewer-actions {
    grid-column: 2;
    grid-row: 1;
}

.pv-file-viewer-inline > .pv-file-viewer-title {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    margin: 0;
    font-size: 0.875rem;
}

.pv-file-viewer-facts {
    grid-column: 1 / -1;
    grid-row: 2;
    min-width: 0;
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0 0.5rem;
    color: var(--bs-secondary-color);
    font-size: 0.8125rem;
}

.pv-file-viewer-facts > span {
    white-space: nowrap;
}

.pv-file-viewer-facts > span + span::before {
    content: "·";
    margin-right: 0.5rem;
}

.pv-file-viewer.is-compact .pv-file-viewer-credit {
    display: none;
}

.pv-file-viewer.is-compact .pv-file-viewer-meta {
    grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
}

.pv-file-viewer.is-compact .pv-file-viewer-meta > div {
    padding-inline: 1rem;
}

.pv-file-viewer.is-compact .pv-file-viewer-body {
    height: clamp(22rem, 55vh, 34rem);
    min-height: clamp(22rem, 55vh, 34rem);
}

.pv-file-viewer.is-compact .pv-file-viewer-frame,
.pv-file-viewer.is-compact .pv-file-sheet,
.pv-file-viewer.is-compact .pv-file-slides,
.pv-file-viewer.is-compact .docxjs-container {
    height: 100%;
    min-height: 100%;
}

.pv-file-viewer-image {
    align-self: center;
    max-width: 100%;
    max-height: 72vh;
    padding: 1rem;
    object-fit: contain;
}

.pv-file-viewer.is-compact .pv-file-viewer-image {
    max-height: 100%;
}

/* A photo is as tall as it needs to be (capped), without grey bands above and below */
.pv-file-viewer.is-compact .pv-file-viewer-body:has(> .pv-file-viewer-image) {
    height: auto;
    min-height: 0;
    padding: 0;
}

.pv-file-viewer.is-compact .pv-file-viewer-body > .pv-file-viewer-image {
    width: 100%;
    height: auto;
    max-height: 62vh;
    object-fit: contain;
}

.pv-file-viewer-frame {
    width: 100%;
    min-height: 72vh;
    border: 0;
    background-color: var(--bs-body-bg);
}

.pv-file-viewer-audio {
    display: grid;
    align-self: center;
    gap: 1rem;
    width: min(100%, 760px);
    padding: 1rem;
}

.pv-file-viewer-audio canvas {
    display: block;
    width: 100%;
    height: 180px;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    background-color: var(--ui-input-bg);
}

.pv-file-viewer-audio audio {
    width: 100%;
}

.pv-file-status {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 180px;
    color: var(--bs-secondary-color);
    font-size: 0.875rem;
    font-weight: 500;
    text-align: center;
}

.pv-file-status.is-error {
    color: var(--bs-danger-text-emphasis);
}

/* Office previews sit on a paper-like surface (the document is the content) */
.pv-file-sheet,
.pv-file-slides,
.docxjs-container {
    width: 100%;
    min-height: 72vh;
    overflow: auto;
    padding: 1rem;
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
}

.docxjs-container .docx {
    max-width: 100%;
    margin-inline: auto;
    box-sizing: border-box;
}

.pv-file-viewer.is-compact .docxjs-container,
.pv-file-viewer.is-compact .docxjs-container .docx-wrapper {
    max-width: 100%;
    overflow-x: hidden;
}

.pv-file-viewer.is-compact .docxjs-container .docx-wrapper {
    padding: 0.5rem !important;
    background: transparent !important;
}

.pv-file-viewer.is-compact .docxjs-container .docx {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

.pv-file-doc {
    display: grid;
    align-self: center;
    gap: 0.5rem;
    width: min(100%, 380px);
    margin: 1rem;
    padding: 1.25rem;
    border: 1px solid var(--bs-border-color);
    border-top: 0.375rem solid var(--bs-primary);
    border-radius: var(--bs-border-radius);
    background-color: var(--bs-body-bg);
    box-shadow: var(--bs-box-shadow);
}

.pv-file-doc strong {
    color: var(--bs-emphasis-color);
    font-size: 0.875rem;
}

.pv-file-doc span {
    display: block;
    overflow: hidden;
    color: var(--bs-secondary-color);
    font-size: 0.75rem;
    line-height: 1.45;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pv-file-doc.is-text {
    align-self: stretch;
    width: 100%;
    margin: 0;
    border-top-width: 0.25rem;
    box-shadow: none;
}

.pv-file-doc.is-text span {
    white-space: normal;
}

.pv-file-sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.pv-file-sheet-head strong {
    color: var(--bs-emphasis-color);
    font-size: 0.75rem;
    text-transform: uppercase;
}

.pv-file-sheet-head span {
    color: var(--bs-secondary-color);
    font-size: 0.8125rem;
    font-weight: 500;
}

.pv-file-sheet-scroll {
    width: 100%;
    overflow: auto;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
}

.pv-file-sheet-table {
    width: 100%;
    min-width: 620px;
    border-collapse: collapse;
    font-size: 0.75rem;
}

.pv-file-sheet-table th,
.pv-file-sheet-table td {
    max-width: 180px;
    padding: 0.5rem 0.75rem;
    overflow: hidden;
    border-right: 1px solid var(--bs-border-color);
    border-bottom: 1px solid var(--bs-border-color);
    color: var(--bs-body-color);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pv-file-sheet-table th {
    background-color: var(--ui-hover);
    color: var(--bs-emphasis-color);
    font-size: 0.6875rem;
    text-transform: uppercase;
}

.pv-file-slide-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.75rem;
}

.pv-file-slide-card {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    min-height: 132px;
    padding: 0.875rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    background-color: var(--ui-input-bg);
}

.pv-file-slide-card span {
    color: var(--bs-secondary-color);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
}

.pv-file-slide-card strong {
    color: var(--bs-emphasis-color);
    font-size: 0.9375rem;
    line-height: 1.3;
}

.pv-file-slide-card p {
    margin: 0;
    color: var(--bs-secondary-color);
    font-size: 0.8125rem;
    line-height: 1.45;
}

/* Image preview modal: picture + metadata */
/* Large image preview: the dialog fits the viewport; the image is shown whole on the left and
   the metadata scrolls on its own on the right, one compact row per field */
.pv-image-preview {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(17rem, 22rem);
    height: min(calc(100dvh - 8rem), 920px);
    overflow: hidden;
}

.pv-image-preview-media {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 0;
    padding: 0.75rem;
    overflow: hidden;
    background-color: var(--ui-hover);
}

.pv-image-preview-media img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    border-radius: var(--bs-border-radius);
    object-fit: contain;
}

.pv-image-preview-meta {
    min-width: 0;
    min-height: 0;
    padding: 1rem 1.25rem;
    overflow-y: auto;
    border-left: 1px solid var(--bs-border-color);
}

.pv-image-preview-list {
    margin: 0;
    border-top: 1px solid var(--bs-border-color);
}

.pv-image-preview-list > div {
    display: grid;
    grid-template-columns: 7.5rem minmax(0, 1fr);
    gap: 0.75rem;
    align-items: baseline;
    padding: 0.4375rem 0;
    border-bottom: 1px solid var(--bs-border-color);
}

.pv-image-preview-list dt {
    color: var(--bs-secondary-color);
    font-size: 0.75rem;
    font-weight: 400;
}

.pv-image-preview-list dd {
    margin: 0;
    color: var(--bs-emphasis-color);
    font-size: 0.8125rem;
    overflow-wrap: anywhere;
}

@media (max-width: 991.98px) {
    .pv-image-preview {
        grid-template-columns: minmax(0, 1fr);
        height: auto;
        max-height: none;
        overflow-y: auto;
    }

    .pv-image-preview-media {
        min-height: 48vh;
    }

    .pv-image-preview-meta {
        border-top: 1px solid var(--bs-border-color);
        border-left: 0;
    }
}

/* ------------------------------------------------------------------ image placement */

.pv-image-placement {
    display: grid;
    gap: 0.75rem;
}

.pv-placement-stage {
    position: relative;
    overflow: hidden;
    min-height: 190px;
    aspect-ratio: 16 / 9;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    background-color: var(--ui-hover);
    touch-action: none;
    user-select: none;
}

.pv-placement-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

.pv-placement-grid {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-image:
        linear-gradient(to right, rgba(var(--bs-emphasis-color-rgb), 0.12) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(var(--bs-emphasis-color-rgb), 0.12) 1px, transparent 1px);
    background-size: 10% 10%;
    pointer-events: none;
}

.pv-placement-rect {
    position: absolute;
    z-index: 2;
    display: grid;
    place-items: center;
    min-width: 2rem;
    min-height: 1.5rem;
    border: 2px solid var(--bs-primary);
    border-radius: var(--bs-border-radius-sm);
    background-color: rgba(var(--bs-primary-rgb), 0.12);
    box-shadow: var(--bs-box-shadow);
    cursor: grab;
}

.pv-placement-rect:active {
    cursor: grabbing;
}

.pv-placement-rect.is-static {
    cursor: default;
}

.pv-placement-rect img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    max-height: none !important;
    object-fit: contain;
    pointer-events: none;
}

.pv-placement-resize {
    position: absolute;
    right: -0.5rem;
    bottom: -0.5rem;
    z-index: 3;
    width: 1.125rem;
    height: 1.125rem;
    padding: 0;
    border: 2px solid var(--bs-body-bg);
    border-radius: 50%;
    background-color: var(--bs-primary);
    cursor: nwse-resize;
}

.pv-placement-resize:focus-visible {
    box-shadow: var(--ui-focus-ring);
}

/* ------------------------------------------------------------------ gallery card + map */

.pv-gallery-card {
    min-width: 0;
    overflow: hidden;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.pv-gallery-card:hover,
.pv-gallery-card:focus-within {
    border-color: color-mix(in srgb, var(--bs-primary) 45%, var(--bs-border-color));
}

.pv-gallery-card-button {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
}

.pv-gallery-card-button:disabled {
    cursor: default;
}

.pv-gallery-card-button:focus-visible {
    outline: 0;
    box-shadow: inset var(--ui-focus-ring);
}

.pv-gallery-card-media {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    background-color: var(--ui-hover);
}

.pv-gallery-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pv-gallery-card-status {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
}

.pv-gallery-card-distance {
    position: absolute;
    bottom: 0.5rem;
    left: 0.5rem;
    padding: 0.25rem 0.5rem;
    border-radius: var(--bs-border-radius-pill);
    background-color: var(--ui-glass-bg);
    color: var(--bs-emphasis-color);
    font-size: 0.75rem;
    font-weight: 500;
    -webkit-backdrop-filter: var(--ui-glass-filter);
    backdrop-filter: var(--ui-glass-filter);
}

.pv-gallery-card-body {
    display: grid;
    gap: 0.25rem;
    padding: 0.75rem 1rem;
}

.pv-gallery-card-body > strong,
.pv-gallery-card-body > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pv-gallery-card-body > span {
    color: var(--bs-secondary-color);
    font-size: 0.8125rem;
}

.pv-gallery-card-location {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.pv-geo-map-shell {
    position: relative;
    min-height: 580px;
    overflow: hidden;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg);
    background-color: var(--ui-page-bg);
}

.pv-geo-map {
    width: 100%;
    min-height: 580px;
    height: 100%;
}

.pv-geo-map:focus-visible {
    outline: 0;
    box-shadow: inset var(--ui-focus-ring);
}

.pv-map-notice {
    position: absolute;
    top: 0.75rem;
    left: 50%;
    z-index: 700;
    max-width: calc(100% - 2rem);
    padding: 0.4375rem 0.875rem;
    border: 1px solid var(--ui-glass-border);
    border-radius: var(--bs-border-radius-pill);
    background-color: var(--ui-glass-bg);
    box-shadow: var(--bs-box-shadow);
    color: var(--bs-body-color);
    font-size: 0.8125rem;
    transform: translateX(-50%);
    -webkit-backdrop-filter: var(--ui-glass-filter);
    backdrop-filter: var(--ui-glass-filter);
}

.pv-photo-marker {
    overflow: hidden;
    border: 3px solid var(--bs-body-bg);
    border-radius: 50%;
    background-color: var(--bs-body-bg);
    box-shadow: 0 0 0 1px var(--bs-border-color), var(--bs-box-shadow);
}

.pv-photo-marker img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Leaflet places markers with a transform: the hover cue is a ring, not a scale */
.pv-photo-marker:hover,
.pv-photo-marker:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 2px var(--bs-primary), var(--bs-box-shadow);
}

/* Proofs taken close together: one bubble with their count until they fan out.
   (.leaflet-marker-icon: Leaflet makes every marker a block, the count would sit in a corner.) */
.leaflet-marker-icon.pv-map-cluster {
    display: grid;
    place-items: center;
    border: 3px solid var(--bs-body-bg);
    border-radius: 50%;
    background-color: var(--bs-primary);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--bs-primary) 22%, transparent), var(--bs-box-shadow);
    color: var(--ui-on-primary);
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    line-height: 1;
    transition: box-shadow 0.15s ease;
}

.pv-map-cluster:hover {
    box-shadow: 0 0 0 7px color-mix(in srgb, var(--bs-primary) 28%, transparent), var(--bs-box-shadow);
}

.pv-map-cluster.is-geo-suspect {
    box-shadow: 0 0 0 4px var(--bs-warning), var(--bs-box-shadow);
}

/* Hover card of a marker: the picture in large, or the 3D scan turning on itself */
.leaflet-tooltip.pv-map-peek-tooltip {
    padding: 0;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg);
    background-color: var(--bs-body-bg);
    box-shadow: var(--bs-box-shadow);
    color: var(--bs-body-color);
    white-space: normal;
}

.leaflet-tooltip.pv-map-peek-tooltip::before {
    translate: var(--pv-peek-arrow-shift, 0) 0;
}

.leaflet-tooltip-top.pv-map-peek-tooltip::before {
    border-top-color: var(--bs-body-bg);
}

.leaflet-tooltip-bottom.pv-map-peek-tooltip::before {
    border-bottom-color: var(--bs-body-bg);
}

.pv-map-peek {
    display: grid;
    width: 15rem;
    overflow: hidden;
    border-radius: inherit;
}

.pv-map-peek .pv-map-peek-media {
    position: relative;
    display: grid;
    flex: none;
    width: 100%;
    height: 9.5rem;
    min-height: 0;
    border-radius: 0;
    object-fit: cover;
}

.pv-map-peek-badge {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    display: inline-grid;
    place-items: center;
    padding: 0.125rem 0.375rem;
    border-radius: var(--bs-border-radius-pill);
    background-color: color-mix(in srgb, var(--bs-body-bg) 90%, transparent);
    box-shadow: var(--bs-box-shadow-sm);
    color: var(--bs-primary-text-emphasis);
    font-size: 0.875rem;
}

.pv-map-peek-body {
    display: grid;
    gap: 0.125rem;
    min-width: 0;
    padding: 0.5rem 0.75rem 0.625rem;
    color: var(--bs-secondary-color);
    font-size: 0.75rem;
}

.pv-map-peek-body > strong {
    overflow: hidden;
    color: var(--bs-emphasis-color);
    font-size: 0.8125rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pv-map-peek-geo {
    color: var(--bs-warning-text-emphasis);
}

/* Proofs that are not photos: an icon on the colour of their kind */
/* The tints are see-through: laid on the page colour, the map does not show through the marker */
.leaflet-marker-icon.pv-kind-marker,
.pv-kind-marker,
.pv-map-popup-icon {
    --pv-kind-tint: var(--bs-secondary-bg);
    display: grid;
    place-items: center;
    background: linear-gradient(var(--pv-kind-tint), var(--pv-kind-tint)) var(--bs-body-bg);
    color: var(--bs-secondary-color);
}

.pv-kind-marker i {
    font-size: 1.25rem;
    line-height: 1;
}

.pv-kind-marker.is-document,
.pv-map-popup-icon.is-document {
    --pv-kind-tint: var(--bs-info-bg-subtle);
    color: var(--bs-info-text-emphasis);
}

.pv-kind-marker.is-scan_3d,
.pv-map-popup-icon.is-scan_3d {
    --pv-kind-tint: var(--bs-primary-bg-subtle);
    color: var(--bs-primary-text-emphasis);
}

.pv-map-popup {
    display: grid;
    gap: 0.25rem;
    min-width: 12rem;
}

.pv-map-popup > img {
    width: 100%;
    height: 110px;
    border-radius: var(--bs-border-radius-sm);
    object-fit: cover;
}

.pv-map-popup-icon {
    height: 110px;
    border-radius: var(--bs-border-radius-sm);
    font-size: 2rem;
}

.pv-map-popup > strong {
    color: var(--bs-emphasis-color);
}

.pv-map-popup small,
.pv-map-popup > span {
    color: var(--bs-secondary-color);
}

.pv-map-popup > div {
    display: flex;
    gap: 0.375rem;
    margin-top: 0.25rem;
}

.pv-map-popup button,
.pv-map-popup a {
    flex: 1;
    padding: 0.3125rem 0.5rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-sm);
    background-color: var(--ui-input-bg);
    color: var(--bs-emphasis-color);
    font-size: 0.75rem;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
}

.pv-map-popup button:hover,
.pv-map-popup a:hover {
    background-color: var(--ui-hover);
}

@media (max-width: 767.98px) {
    .pv-geo-map-shell,
    .pv-geo-map {
        min-height: 65vh;
    }
}

/* Leaflet popups follow the theme (Leaflet ships a white popup) */
.leaflet-container .leaflet-popup-content-wrapper,
.leaflet-container .leaflet-popup-tip {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    box-shadow: var(--bs-box-shadow);
}

.leaflet-container a.leaflet-popup-close-button {
    color: var(--bs-secondary-color);
}

/* Standalone file preview pages (laravel-file-viewer routes) */
.pv-file-viewer-page {
    min-height: 100vh;
    padding: 1rem;
}

.pv-file-viewer-wrap {
    width: min(100%, 1480px);
    margin-inline: auto;
}

/* Card header: the title block takes the free space but may shrink to 16rem before the actions wrap */
.pv-card-heading {
    flex: 1 1 16rem;
}

/* ---- 3D object form: product sheet and model previews ------------------------------------ */

.pv-sheet-preview {
    display: flex;
    gap: 0.875rem;
    padding: 0.625rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg);
    background-color: var(--ui-input-bg);
}

.pv-sheet-preview-media {
    position: relative;
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 7.5rem;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border: 1px solid var(--bs-border-color-translucent);
    border-radius: var(--bs-border-radius);
    background-color: #fff;
}

a.pv-sheet-preview-media:hover,
a.pv-sheet-preview-media:focus-visible {
    border-color: var(--bs-primary);
}

.pv-sheet-preview-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: top center;
}

.pv-sheet-preview-icon {
    font-size: 2.25rem;
    color: var(--bs-secondary-color);
}

.pv-sheet-preview-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

.pv-object-preview-card {
    overflow: hidden;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg);
    background-color: var(--ui-input-bg);
}

.pv-object-preview {
    position: relative;
    height: 15rem;
    background: linear-gradient(180deg, var(--bs-body-bg), var(--ui-hover));
}

.pv-object-preview-card .pv-object-preview {
    border-bottom: 1px solid var(--bs-border-color-translucent);
}

.pv-object-preview-stage {
    position: absolute;
    inset: 0;
    cursor: grab;
    touch-action: none;
}

.pv-object-preview-stage:active {
    cursor: grabbing;
}

.pv-object-preview-canvas {
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.pv-object-preview.is-ready .pv-object-preview-canvas {
    opacity: 1;
}

.pv-object-preview-loading,
.pv-object-preview-failed {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    align-items: center;
    justify-content: center;
    color: var(--bs-secondary-color);
    pointer-events: none;
}

.pv-object-preview-failed {
    display: none;
    font-size: 0.875rem;
}

.pv-object-preview-failed .bi {
    font-size: 1.75rem;
}

.pv-object-preview.is-ready .pv-object-preview-loading,
.pv-object-preview.is-failed .pv-object-preview-loading {
    display: none;
}

.pv-object-preview.is-failed .pv-object-preview-failed {
    display: flex;
}

.pv-object-preview-badge {
    position: absolute;
    top: 0.625rem;
    left: 0.625rem;
    pointer-events: none;
}

.pv-object-preview-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    align-items: center;
    padding: 0.625rem 0.75rem;
}

.pv-object-preview-skeleton {
    flex-direction: column;
    gap: 0.75rem;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: 1px dashed var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg);
}

/* Colour of a 3D object: preset swatches and a custom one opening the native picker */
.pv-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.pv-swatch {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 1.875rem;
    height: 1.875rem;
    margin: 0;
    padding: 0;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 50%;
    background-color: var(--pv-swatch);
    color: #fff;
    cursor: pointer;
    transition: transform 0.1s ease, box-shadow 0.15s ease;
}

.pv-swatch:hover {
    transform: scale(1.08);
}

.pv-swatch:focus-visible,
.pv-swatch:focus-within {
    outline: 0;
    box-shadow: var(--ui-focus-ring);
}

.pv-swatch .bi-check-lg {
    display: none;
    font-size: 1rem;
    filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.5));
}

.pv-swatch.is-selected {
    box-shadow: 0 0 0 2px var(--bs-body-bg), 0 0 0 4px var(--bs-emphasis-color);
}

.pv-swatch.is-selected .bi-check-lg {
    display: block;
}

.pv-swatch-custom {
    border: 1px dashed var(--bs-border-color);
    background-image: conic-gradient(from 90deg, #f5424b, #f5c542, #4bd16f, #42c8f5, #6b5cf5, #e042f5, #f5424b);
    background-clip: padding-box;
    color: #fff;
}

.pv-swatch-custom.is-selected {
    background-image: none;
    border-style: solid;
}

.pv-swatch-custom .bi {
    font-size: 0.875rem;
    filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.6));
}

/* Thumbnail of a 3D object in the library list */
.pv-object-thumb {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--bs-border-color-translucent);
    border-radius: var(--bs-border-radius);
    background-color: var(--pv-object-color);
    color: #fff;
}

button.pv-object-thumb {
    cursor: pointer;
}

button.pv-object-thumb:hover {
    border-color: var(--bs-primary);
}

.pv-object-thumb img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    background-color: #fff;
}

.pv-object-thumb-dot {
    position: absolute;
    right: 0.1875rem;
    bottom: 0.1875rem;
    width: 0.625rem;
    height: 0.625rem;
    border: 1.5px solid #fff;
    border-radius: 50%;
    background-color: var(--pv-object-color);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
}

.pv-object-thumb-icon {
    font-size: 1.25rem;
    filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.45));
}

.pv-object-thumb.is-failed img,
.pv-object-thumb.is-failed .pv-object-thumb-dot,
.pv-object-thumb:not(.is-failed) img ~ .pv-object-thumb-icon {
    display: none;
}

/* ---- 3D scan viewer (three.js canvas over the rendered picture until it is ready) -------- */

.pv-scan-viewer {
    position: relative;
    flex: 1 1 auto;
    min-height: 100%;
    overflow: hidden;
    background: var(--pv-scan-poster, none) center / contain no-repeat, var(--ui-hover);
}

.pv-scan-viewer.is-ready {
    background: var(--ui-hover);
}

.pv-scan-viewer:fullscreen {
    background-color: var(--bs-body-bg);
}

.pv-scan-stage {
    position: absolute;
    inset: 0;
    cursor: grab;
    touch-action: none;
}

.pv-scan-stage:active {
    cursor: grabbing;
}

.pv-scan-canvas {
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.pv-scan-viewer.is-ready .pv-scan-canvas {
    opacity: 1;
}

.pv-scan-labels {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.pv-scan-viewer:not(.is-labelled) .pv-scan-labels {
    display: none;
}

.pv-scan-tools [aria-pressed="true"] {
    background-color: var(--bs-secondary-bg);
    color: var(--bs-emphasis-color);
}

.pv-scan-label {
    position: absolute;
    top: 0;
    left: 0;
    display: inline-flex;
    align-items: baseline;
    gap: 0.375rem;
    max-width: 14rem;
    padding: 0.25rem 0.625rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 999px;
    background-color: color-mix(in srgb, var(--bs-body-bg) 92%, transparent);
    box-shadow: var(--bs-box-shadow-sm);
    color: var(--bs-body-color);
    font-size: 0.75rem;
    line-height: 1.25;
    white-space: nowrap;
}

.pv-scan-label[hidden] {
    display: none;
}

.pv-scan-label > strong {
    overflow: hidden;
    font-weight: 600;
    text-overflow: ellipsis;
}

.pv-scan-label > span {
    color: var(--bs-secondary-color);
    font-variant-numeric: tabular-nums;
}

.pv-scan-tools {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    display: flex;
    gap: 0.25rem;
    padding: 0.125rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    background-color: var(--bs-body-bg);
    box-shadow: var(--bs-box-shadow-sm);
}

.pv-scan-viewer:not(.is-ready) .pv-scan-tools {
    display: none;
}

.pv-scan-failed {
    position: absolute;
    inset: 0;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: var(--bs-secondary-color);
    font-size: 0.875rem;
}

.pv-scan-failed > .bi {
    font-size: 2rem;
}

.pv-scan-viewer.is-failed:not([style]) .pv-scan-failed {
    display: flex;
}

/* ---- Placed objects (scan 3D): overlay of the preview, editor page, HUD -------------------- */

.pv-scan-viewer.is-placements-hidden .pv-placement-labels {
    display: none;
}

.pv-placement-labels {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.pv-placement-labels[hidden] {
    display: none;
}

.pv-placement-label {
    position: absolute;
    top: 0;
    left: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    max-width: 14rem;
    padding: 0.1875rem 0.5rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 999px;
    background-color: color-mix(in srgb, var(--bs-body-bg) 92%, transparent);
    box-shadow: var(--bs-box-shadow-sm);
    color: var(--bs-body-color);
    font-size: 0.75rem;
    line-height: 1.25;
    white-space: nowrap;
}

.pv-placement-label[hidden] {
    display: none;
}

.pv-placement-label.is-pin {
    margin-top: -0.875rem; /* Just above the pin head */
}

.pv-placement-label > .bi {
    font-size: 0.8125rem;
}

.pv-placement-label__swatch,
.pv-placement-hud__swatch {
    flex: none;
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 0.1875rem;
    box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.15);
}

.pv-placement-label__name {
    overflow: hidden;
    font-weight: 600;
    text-overflow: ellipsis;
}

.pv-placement-label__state {
    display: none;
    flex: none;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
}

.pv-placement-label.is-ok .pv-placement-label__state,
.pv-placement-label.is-warn .pv-placement-label__state,
.pv-placement-label.is-bad .pv-placement-label__state {
    display: inline-block;
}

.pv-placement-label.is-ok .pv-placement-label__state {
    background-color: #2f9e44;
}

.pv-placement-label.is-warn .pv-placement-label__state {
    background-color: #f08c00;
}

.pv-placement-label.is-bad .pv-placement-label__state {
    background-color: #e03131;
}

.pv-placement-label.has-warning .pv-placement-label__name::after {
    content: " \26A0";
    color: var(--bs-warning-text-emphasis);
}

.pv-placement-label.is-selected {
    z-index: 1;
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--bs-primary) 35%, transparent), var(--bs-box-shadow-sm);
}

/* Editor page: library and details on the side, the scan filling the rest of the viewport */
.ui-content:has(> * > .pv-placement-editor) {
    padding-bottom: 0.75rem;
}

.pv-placement-editor {
    display: grid;
    grid-template-columns: 22rem minmax(0, 1fr);
    gap: 1rem;
    height: calc(100dvh - var(--ui-topbar-height, 3.5rem) - 2.75rem);
    min-height: 28rem;
}

.pv-placement-editor__sidebar {
    min-height: 0;
    overflow-y: auto;
    padding: 1rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg);
    background-color: var(--bs-body-bg);
    overscroll-behavior: contain;
}

.pv-placement-editor__stage {
    position: relative;
    min-height: 0;
    overflow: hidden;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg);
    background-color: var(--ui-hover);
}

.pv-placement-editor__stage > [data-pv-scan-stage] {
    position: absolute;
    inset: 0;
    cursor: grab;
    touch-action: none;
    user-select: none;
}

.pv-placement-editor__stage > [data-pv-scan-stage]:active {
    cursor: grabbing;
}

.pv-placement-editor__stage.is-ready .pv-scan-canvas {
    opacity: 1;
}

.pv-placement-editor__stage.is-editable.is-over-placement > [data-pv-scan-stage] {
    cursor: move;
}

.pv-placement-editor__stage:not(.is-editable).is-over-placement > [data-pv-scan-stage] {
    cursor: pointer;
}

.pv-placement-editor__stage.is-armed > [data-pv-scan-stage],
.pv-placement-editor__stage.is-armed > [data-pv-scan-stage]:active {
    cursor: crosshair;
}

.pv-placement-editor__stage.is-armed:not(.is-aiming) > [data-pv-scan-stage] {
    cursor: not-allowed;
}

.pv-placement-editor__stage.is-dragging > [data-pv-scan-stage],
.pv-placement-editor__stage.is-dragging > [data-pv-scan-stage]:active {
    cursor: grabbing;
}

/* Labels select their object in the editor */
.pv-placement-editor__stage .pv-placement-label {
    cursor: pointer;
    pointer-events: auto;
}

.pv-placement-editor__stage.is-dragging .pv-placement-label,
.pv-placement-editor__stage.is-armed .pv-placement-label {
    pointer-events: none;
}

.pv-placement-editor__stage.is-failed::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--bs-secondary-bg);
}

@media (max-width: 991.98px) {
    .pv-placement-editor {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto;
        height: auto;
        min-height: 0;
    }

    .pv-placement-editor__stage {
        order: -1;
        height: min(70dvh, 36rem);
        min-height: 20rem;
    }

    .pv-placement-editor__sidebar {
        overflow: visible;
    }
}

/* Fit state chip (HUD, ghost hint) */
.pv-placement-state {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.25;
    white-space: nowrap;
}

.pv-placement-state.is-ok {
    border-color: var(--bs-success-border-subtle);
    background-color: var(--bs-success-bg-subtle);
    color: var(--bs-success-text-emphasis);
}

.pv-placement-state.is-warn {
    border-color: var(--bs-warning-border-subtle);
    background-color: var(--bs-warning-bg-subtle);
    color: var(--bs-warning-text-emphasis);
}

.pv-placement-state.is-bad {
    border-color: var(--bs-danger-border-subtle);
    background-color: var(--bs-danger-bg-subtle);
    color: var(--bs-danger-text-emphasis);
}

/* Selected object: state, distances, rotation */
.pv-placement-hud {
    position: absolute;
    bottom: 0.75rem;
    left: 0.75rem;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    width: min(17rem, calc(100% - 1.5rem));
    max-height: calc(100% - 1.5rem);
    overflow-y: auto;
    padding: 0.75rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg);
    background-color: var(--ui-glass-bg);
    -webkit-backdrop-filter: var(--ui-glass-filter);
    backdrop-filter: var(--ui-glass-filter);
    box-shadow: var(--bs-box-shadow);
    color: var(--bs-body-color);
    font-size: 0.8125rem;
}

.pv-placement-hud[hidden],
.pv-placement-hint[hidden] {
    display: none;
}

.pv-placement-hud__head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    max-width: 100%;
}

.pv-placement-hud__head > strong {
    overflow: hidden;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pv-placement-hud__reasons {
    margin: 0;
    padding-left: 1.125rem;
    color: var(--bs-secondary-color);
    font-size: 0.75rem;
}

.pv-placement-hud__reasons > .is-bad {
    color: var(--bs-danger-text-emphasis);
}

.pv-placement-hud__reasons > .is-warn {
    color: var(--bs-warning-text-emphasis);
}

.pv-placement-hud__distances {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.125rem 0.75rem;
    width: 100%;
    margin: 0;
}

.pv-placement-hud__distances > dt {
    color: var(--bs-secondary-color);
    font-weight: 400;
}

.pv-placement-hud__distances > dd {
    margin: 0;
    font-variant-numeric: tabular-nums;
    text-align: end;
}

.pv-placement-hud__warning {
    display: flex;
    gap: 0.375rem;
    margin: 0;
    color: var(--bs-warning-text-emphasis);
    font-size: 0.75rem;
}

.pv-placement-hud__tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
    width: 100%;
    padding-top: 0.5rem;
    border-top: 1px solid var(--bs-border-color);
}

.pv-placement-hud__tools > .btn {
    border: 1px solid var(--bs-border-color);
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
}

.pv-placement-hud__tools > .btn:hover,
.pv-placement-hud__tools > .btn:focus-visible {
    background-color: var(--bs-secondary-bg);
    color: var(--bs-emphasis-color);
}

.pv-placement-hud__keys,
.pv-placement-hint__keys {
    color: var(--bs-secondary-color);
    font-size: 0.75rem;
}

.pv-placement-hud__keys {
    margin-left: auto;
}

/* Object being placed: what to do, and whether it fits where it is */
.pv-placement-hint {
    position: absolute;
    top: 0.75rem;
    left: 50%;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.25rem 0.75rem;
    max-width: calc(100% - 1.5rem);
    padding: 0.375rem 0.875rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 999px;
    background-color: var(--ui-glass-bg);
    -webkit-backdrop-filter: var(--ui-glass-filter);
    backdrop-filter: var(--ui-glass-filter);
    box-shadow: var(--bs-box-shadow-sm);
    color: var(--bs-body-color);
    font-size: 0.8125rem;
    transform: translateX(-50%);
    pointer-events: none;
}

.pv-placement-hint__text {
    font-weight: 600;
}

/* ---- Photos placed in a scan (scan-photos.js): card of the picked photo, view from its place - */

/* The toolbar stays over a photo looked through, so its view buttons and the photo toggle leave it */
.pv-scan-viewer > .pv-scan-tools,
.pv-placement-editor__stage > .pv-scan-tools {
    z-index: 4;
}

.pv-placement-editor__stage:not(.is-ready) > .pv-scan-tools {
    display: none;
}

.pv-scan-viewer.is-over-photo > [data-pv-scan-stage],
.pv-placement-editor__stage.is-over-photo > [data-pv-scan-stage] {
    cursor: pointer;
}

.pv-scan-photo-card {
    position: absolute;
    right: 0.75rem;
    bottom: 0.75rem;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: min(16rem, calc(100% - 1.5rem));
    max-height: calc(100% - 1.5rem);
    padding: 0.625rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg);
    background-color: color-mix(in srgb, var(--bs-body-bg) 96%, transparent);
    box-shadow: var(--bs-box-shadow);
    color: var(--bs-body-color);
    font-size: 0.8125rem;
    cursor: default;
}

.pv-scan-photo-card[hidden] {
    display: none;
}

.pv-scan-photo-card__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
}

.pv-scan-photo-card__head > strong {
    font-weight: 600;
}

.pv-scan-photo-card__date {
    color: var(--bs-secondary-color);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.pv-scan-photo-card__media {
    min-height: 0;
    overflow: hidden;
    border-radius: var(--bs-border-radius);
    background-color: var(--bs-secondary-bg);
}

.pv-scan-photo-card__image {
    display: block;
    width: 100%;
    height: auto;
    max-height: 10rem;
    object-fit: contain;
}

.pv-scan-photo-card__error {
    margin: 0;
    padding: 1rem 0.75rem;
    color: var(--bs-secondary-color);
    text-align: center;
}

.pv-scan-photo-card__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.375rem;
}

.pv-scan-photo-card__actions .bi,
.pv-scan-photo-view__bar .bi {
    margin-right: 0.25rem;
}

/* Looking through a photo: it covers the model (no orbit), its bars show the model beyond it */
.pv-scan-photo-view {
    position: absolute;
    inset: 0;
    z-index: 3;
    overflow: hidden;
    cursor: default;
    touch-action: none;
}

.pv-scan-photo-view__image {
    position: absolute;
    max-width: none;
    pointer-events: none;
    user-select: none;
}

.pv-scan-photo-view__bar {
    position: absolute;
    bottom: 0.75rem;
    left: 50%;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    max-width: calc(100% - 1.5rem);
    padding: 0.375rem 0.5rem 0.375rem 0.875rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 999px;
    background-color: color-mix(in srgb, var(--bs-body-bg) 94%, transparent);
    box-shadow: var(--bs-box-shadow-sm);
    color: var(--bs-body-color);
    font-size: 0.8125rem;
    transform: translateX(-50%);
}

.pv-scan-photo-view__label {
    font-weight: 600;
    white-space: nowrap;
}

.pv-scan-photo-view__opacity {
    width: 8rem;
    min-width: 4rem;
}

.pv-scan-photo-view__bar > .btn {
    flex-shrink: 0;
    border-radius: 999px;
}

.pv-scan-rooms th:not(:first-child) {
    text-align: end;
}

.pv-scan-rooms th {
    white-space: nowrap;
}

/* ---- 3D object form: parts placed apart from the main one -------------------------------- */

.pv-object-part {
    padding: 0.75rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg);
    background-color: var(--bs-tertiary-bg);
}

.pv-object-part .form-label {
    margin-bottom: 0.25rem;
    font-size: 0.8125rem;
}

.pv-object-part-quantity {
    width: 5.5rem;
}

.pv-object-part-toggle .bi-chevron-right {
    display: inline-block;
    margin-right: 0.25rem;
    font-size: 0.75em;
    transition: transform 0.15s ease;
}

.pv-object-part-toggle .bi-chevron-right.is-open {
    transform: rotate(90deg);
}

.pv-object-preview-card-sm .pv-object-preview,
.pv-object-preview-sm {
    height: 10rem;
}