/* File / Image / Multiple Files production field cards (PSMS.UI.Shared/ProductionField/Fields).
   Global (not .razor.css) because the three components share one look; every class is pff- prefixed.
   Linked once by each host app's App.razor. */

.pff-card { container-type: inline-size; box-sizing: border-box; width: 100%; display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border: 1px solid var(--colorNeutralStroke2, #e1e1e1); border-radius: 8px; background: var(--colorNeutralBackground1, #fff); font-size: 13px; }
.pff-card.is-error { border-color: #e5484d; background: #fff5f5; }
.pff-card.is-uploading { border-color: var(--colorBrandStroke1, #0f6cbd); }
.pff-card.is-readonly { background: var(--colorNeutralBackground2, #f7f7f8); }

.pff-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pff-label { font-weight: 600; color: var(--colorNeutralForeground1, #242424); }
.pff-count { padding: 1px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--colorBrandForeground1, #0f6cbd); background: var(--colorBrandBackground2, #ebf3fc); border: 1px solid var(--colorBrandStroke2, #b4d6fa); }

.pff-body { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pff-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pff-name { font-weight: 500; color: var(--colorNeutralForeground1, #242424); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pff-empty { color: var(--colorNeutralForeground3, #707070); }
.pff-meta, .pff-hint { font-size: 12px; color: var(--colorNeutralForeground3, #707070); }
.pff-error { font-size: 12px; color: #d13438; }

/* Thumbnail / icon tile */
.pff-thumb { position: relative; flex: none; width: 56px; height: 56px; border-radius: 8px; border: 1px solid var(--colorNeutralStroke2, #e1e1e1); background: var(--colorNeutralBackground2, #f5f5f5); display: flex; align-items: center; justify-content: center; }
.pff-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 7px; }
.pff-thumb.is-small { width: 40px; height: 40px; border-radius: 6px; }
.pff-thumb.is-small img { border-radius: 5px; }
.pff-thumb.is-placeholder { border-style: dashed; color: var(--colorNeutralForeground4, #a0a0a0); }
.pff-tile { min-width: 34px; padding: 6px 5px; border-radius: 5px; font-size: 11px; font-weight: 700; color: #fff; text-align: center; letter-spacing: .02em; }
.pff-thumb.is-small .pff-tile { min-width: 26px; padding: 3px 3px; font-size: 9px; }
.pff-tile.k-pdf { background: #d13438; }
.pff-tile.k-sheet { background: #107c41; }
.pff-tile.k-doc { background: #185abd; }
.pff-tile.k-zip { background: #8a6d3b; }
.pff-tile.k-design { background: #c239b3; }
.pff-tile.k-image, .pff-tile.k-file { background: #616161; }
.pff-remove { position: absolute; top: -8px; right: -8px; width: 22px; height: 22px; border-radius: 50%; border: 2px solid #fff; background: #616161; color: #fff; font-size: 13px; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.pff-remove:hover { background: #3b3b3b; }

/* Multiple files list */
.pff-list { display: flex; flex-direction: column; gap: 6px; }
.pff-row { display: flex; align-items: center; gap: 12px; padding: 4px 2px; }
.pff-trash { flex: none; border: none; background: transparent; color: var(--colorNeutralForeground3, #707070); cursor: pointer; padding: 6px; border-radius: 6px; display: flex; }
.pff-trash:hover { background: var(--colorNeutralBackground3, #f0f0f0); color: #d13438; }
.pff-wide { width: 100%; }

/* Upload progress */
.pff-progress { display: flex; align-items: center; gap: 10px; }
.pff-bar { flex: 1; height: 6px; border-radius: 3px; background: var(--colorNeutralBackground3, #ebebeb); overflow: hidden; }
.pff-bar > span { display: block; height: 100%; background: var(--colorBrandBackground, #0f6cbd); transition: width .2s; }

/* Read-only View link styled like a subtle button */
.pff-view { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 6px; background: var(--colorNeutralBackground3, #ebebeb); color: var(--colorNeutralForeground2, #424242); text-decoration: none; font-weight: 500; }
.pff-view:hover { background: var(--colorNeutralBackground3Hover, #e0e0e0); }

/* Narrow cards (gallery grid, 1-column fields): smaller thumbnail and the Browse button drops to its
   own full-width line instead of squeezing the file name into a one-word column. */
@container (max-width: 380px) {
    .pff-body { flex-wrap: wrap; }
    .pff-thumb { width: 44px; height: 44px; }
    .pff-thumb .pff-tile { min-width: 26px; padding: 3px; font-size: 9px; }
    .pff-main { flex-basis: calc(100% - 54px); }
    .pff-body > fluent-button, .pff-body > .pff-view { width: 100%; justify-content: center; }
}