/* ── AssetPreview ──────────────────────────────────────────────────────
   Canonical asset-display component. Image thumbnail OR file-icon link,
   depending on the asset's filename. Reused across attachment fields,
   data grid binary cells, and report cells so every surface looks and
   behaves the same.

   Thumbnails cap at a reasonable preview size so a giant full-res photo
   doesn't explode the cell/tile. Click → full-res overlay via the
   app-wide ImageZoomBroker (mounted in MainLayout).
   ──────────────────────────────────────────────────────────────────── */

.asset-preview {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-width: 0;
}

.asset-preview.inline {
    vertical-align: middle;
}

.asset-preview-thumb {
    max-height: 4rem;
    max-width: 6rem;
    object-fit: contain;
    border-radius: var(--theme-radius);
    border: 1px solid var(--theme-border-subtle);
    cursor: zoom-in;
    background-color: var(--theme-background-raised);
}

.asset-preview-thumb:hover {
    border-color: var(--theme-primary);
}

.asset-preview-file {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.5rem;
    border-radius: var(--theme-radius);
    border: 1px solid var(--theme-border-subtle);
    background-color: var(--theme-background-raised);
    color: var(--theme-text);
    text-decoration: none;
    font-size: var(--theme-font-size-sm);
    transition: var(--theme-transition);
}

.asset-preview-file:hover {
    border-color: var(--theme-primary);
    color: var(--theme-primary);
    background-color: var(--theme-background-hover);
}

.asset-preview-file i {
    font-size: 1rem;
    flex-shrink: 0;
}

.asset-preview-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 12rem;
}

.asset-preview-loading,
.asset-preview-missing {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.5rem;
    font-size: var(--theme-font-size-sm);
    color: var(--theme-text-muted);
    font-style: italic;
}

.asset-preview-missing i {
    color: var(--theme-danger);
    font-style: normal;
}