/* FileUI widget styling for Bootstrap 5.
   FydesFileUpload.js was written for Bootstrap 3 class names (btn-xs, btn-default, input-sm) —
   mapped here so the shared JS can stay untouched. */

.btn-xs     { padding: .125rem .4rem; font-size: .75rem; border-radius: .2rem; }
.btn-default {
    color: var(--bs-body-color); background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
}
.btn-default:hover { background: var(--bs-tertiary-bg); }
.input-sm   { padding: .2rem .5rem; font-size: .875rem; }

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

.fydes-fu-pending-list,
.fydes-fu-gallery { padding-left: 0; margin: .5rem 0 0; list-style: none; }

.fydes-fu-pending-list li {
    display: flex; flex-wrap: wrap; align-items: center; gap: .4rem;
    padding: .5rem; margin-bottom: .5rem;
    border: 1px solid var(--bs-border-color); border-radius: .375rem;
}
.fydes-fu-pending-list .fu-pending-progress { flex: 0 0 100%; margin: 0 !important; }
.fydes-fu-pending-list .fu-pending-label    { width: auto; flex: 1 1 140px; margin-left: 0 !important; }
.fydes-fu-pending-list li.fu-error          { border-color: var(--bs-danger); }

.fydes-fu-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .75rem; }
.fydes-fu-gallery li {
    display: flex; flex-wrap: wrap; justify-content: center; align-content: flex-start; gap: .3rem;
    padding: .5rem; border: 1px solid var(--bs-border-color); border-radius: .375rem; background: var(--bs-body-bg);
}
.fydes-fu-gallery li > img,
.fydes-fu-gallery li > .fu-gallery-label-input,
.fydes-fu-gallery li > .fu-gallery-label { flex: 0 0 100%; width: 100% !important; max-width: 100%; margin: 0 !important; }
.fydes-fu-gallery li > img { height: 110px; max-height: none !important; object-fit: cover; border-radius: .25rem; }