.filepond--root {
    margin-bottom: 0px;
}

.ox-frame .filepond--root {
    margin-bottom: 7px;
}

.ox-filepond-read-only .filepond--drop-label, .ox-filepond-read-only .filepond--action-remove-item {
	display: none;
}

.ox-upload-editor-box {
  display: inline; 
}

.ox-upload-editor-box:has(> .ox-files) {
  display: block; 
}

/* Positioning wrapper for upload editor to host the top-right actions */
.ox-upload-editor-box {
    position: relative;
}

/* Top-right positioned download-all action */
.ox-upload-editor-box .ox-download-all {
    position: absolute;
    top: 6px;
    right: 8px;
    z-index: 2;
}

.ox-upload-editor-box .ox-download-all .ox-download-all-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm);
    color: var(--action-color);
    text-decoration: none;
}

.ox-upload-editor-box .ox-download-all .ox-download-all-link:hover {
    background: var(--action-hover-background);
    color: var(--action-hover-color);
}

.ox-upload-editor-box .ox-download-all .mdi {
    font-size: 20px;
    line-height: 1;
}

/* Drop zone root styling via CSS only — a designer can override --upload-file-background
   in their theme CSS without touching JavaScript. CSS variables are live: when the @import
   chain finishes loading, the browser recalculates automatically. */
.ox-upload-editor-box .filepond--root {
    background: var(--upload-file-background) !important;
    border-radius: var(--radius-md) !important;
    overflow: hidden !important;
}

/* Make all FilePond panels transparent so the root's upload-file-background shows through.
   FilePond sets background-color: #f1f0ef on .filepond--panel-root in its CSS (no !important).
   When files are added, FilePond re-creates panel DOM, losing inline transparent set by JS.
   These CSS rules with !important apply to all panel elements including newly created ones. */
.ox-upload-editor-box .filepond--panel-root,
.ox-upload-editor-box .filepond--panel,
.ox-upload-editor-box .filepond--panel-top,
.ox-upload-editor-box .filepond--panel-bottom,
.ox-upload-editor-box .filepond--panel-center {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}