/* 共用 FileUpload 元件樣式 */
.file-upload-component {
    display: block;
    margin-bottom: .5rem;
}

.file-upload-btn {
    margin-bottom: .5rem;
}

.file-upload-cards {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.file-upload-card {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .35rem .6rem;
    border: 1px solid #dee2e6;
    border-radius: .375rem;
    background: #f8f9fa;
    max-width: 100%;
}

.file-upload-card .file-upload-name {
    max-width: 14rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 檔名為下載連結：平時不帶底線，hover 才顯示 */
.file-upload-card a.file-upload-name {
    text-decoration: none;
}

.file-upload-card a.file-upload-name:hover {
    text-decoration: underline;
}

/* 圖片檔卡片：縮圖直排版（縮圖在上、檔名在下、移除鈕浮於縮圖右上角） */
.file-upload-card-image {
    position: relative;
    flex-direction: column;
    align-items: stretch;
    padding: .35rem;
}

.file-upload-card-image .file-upload-thumb {
    display: block;
}

.file-upload-card-image .file-upload-thumb img {
    display: block;
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: .25rem;
    cursor: zoom-in;
}

.file-upload-card-image .file-upload-name {
    max-width: 120px;
    font-size: .8125rem;
}

.file-upload-card-image .file-upload-remove {
    position: absolute;
    top: .5rem;
    right: .5rem;
    padding: .25rem;
    background-color: rgba(255, 255, 255, .85);
    border-radius: 50%;
}

.file-upload-card.is-uploading {
    opacity: .6;
}

.file-upload-spinner {
    width: 1rem;
    height: 1rem;
    border: 2px solid #ced4da;
    border-top-color: #0d6efd;
    border-radius: 50%;
    animation: file-upload-spin .8s linear infinite;
}

@keyframes file-upload-spin {
    to { transform: rotate(360deg); }
}

.file-upload-error:empty {
    display: none;
}

.file-upload-error {
    margin-top: .25rem;
}

/* 上傳失敗卡片：保留供重試/移除，紅框標示 */
.file-upload-card.is-failed {
    border-color: #dc3545;
    background: #fdf2f3;
}

.file-upload-card.is-failed .file-upload-fail-reason {
    color: #dc3545;
    font-size: .8125rem;
}

/* 互動式裁切 overlay（cropper.js 掛載於 dialog 內的 img） */
.file-upload-crop-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .6);
}

.file-upload-crop-dialog {
    background: #fff;
    border-radius: .5rem;
    padding: 1rem;
    max-width: min(90vw, 900px);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.file-upload-crop-body {
    overflow: hidden;
    max-height: calc(90vh - 6rem);
}

.file-upload-crop-body img {
    display: block;
    max-width: 100%;
}

.file-upload-crop-footer {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
}