/* RM Forms — uploader UI. Scoped under .rm-up so it cannot leak into a theme. */

.rm-up { --rm-up-accent: #6366f1; --rm-up-ok: #16a34a; --rm-up-bad: #dc2626; }
.rm-up * { box-sizing: border-box; }

/* `display: block` here is load-bearing, not cosmetic.
 *
 * .rm-up-drop is a <label>, and a label is display:inline by default. An
 * inline box ignores width, is not sized by its padding, and has its border
 * drawn around each fragment of the text flow — so the drop zone rendered
 * as two narrow slivers beside the field's label instead of one full-width
 * dashed box.
 *
 * It looked right on the site this was built against only because that
 * THEME happened to declare `label { display: block }`. Nothing here ever
 * asked for that, so on a theme without it the field looked broken.
 * Declaring it makes the uploader independent of whatever theme it lands
 * in — which is the whole point of a portable plugin. */
.rm-up-drop {
	display: block; width: 100%;
	border: 2px dashed #cbd5e1; border-radius: 12px; background: #f8fafc;
	padding: 22px 18px; text-align: center; cursor: pointer;
	transition: border-color .15s ease, background .15s ease;
}
.rm-up-drop:hover, .rm-up-drop.is-over { border-color: var(--rm-up-accent); background: #eef2ff; }
.rm-up-drop-icon { font-size: 26px; line-height: 1; margin-bottom: 6px; }
.rm-up-drop-main { font-size: 14px; font-weight: 600; color: #334155; }
.rm-up-drop-main span { color: var(--rm-up-accent); text-decoration: underline; }
.rm-up-drop-sub { margin-top: 4px; font-size: 12px; color: #94a3b8; }
.rm-up-count { display: block; margin-top: 6px; font-size: 12px; font-weight: 600; color: #64748b; }

/* THE HIDDEN NATIVE FILE INPUT.
   Every declaration is !important, which is not decoration.
   This input must stay 1px and out of the way, but it is an <input>, and
   a great many themes write one line about their own forms:
       input, select, textarea { width: 100% !important; }
   A plain `width: 1px` loses that fight outright. The input then becomes
   as wide as the page while still absolutely positioned, which pushes the
   whole document sideways and drags the drop zone's own text out of its
   box — reported, exactly, as "the file upload text is out of the box".
   It is invisible either way, so the damage is pure layout and gives no
   clue where it came from.
   clip/clip-path keep it unreachable for a screen reader's visual cursor
   while leaving it focusable, which is why this is the standard
   visually-hidden recipe rather than display:none — a display:none input
   cannot be opened by clicking the label. */
.rm-up-input {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	min-width: 0 !important;
	max-width: 1px !important;
	min-height: 0 !important;
	max-height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	border: 0 !important;
	opacity: 0 !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	pointer-events: none;
}

/* And the drop zone's own label: long filenames and long prompt text wrap
   inside the box instead of running out of it, whatever font the theme
   happens to impose. */
.rm-up-drop {
	overflow-wrap: anywhere;
	word-break: break-word;
}

.rm-up-list { margin-top: 10px; display: grid; gap: 8px; }
.rm-up-list:empty { margin-top: 0; }

.rm-up-item {
	border: 1px solid #e2e8f0; border-radius: 10px; padding: 10px 12px; background: #fff;
}
.rm-up-item.is-done  { border-color: rgba(22,163,74,.35);  background: rgba(22,163,74,.04); }
.rm-up-item.is-error { border-color: rgba(220,38,38,.35);  background: rgba(220,38,38,.04); }

.rm-up-item-head { display: flex; align-items: center; gap: 8px; }
.rm-up-item-icon { flex: none; font-size: 14px; }
.rm-up-item.is-done  .rm-up-item-icon { color: var(--rm-up-ok); font-weight: 700; }
.rm-up-item.is-error .rm-up-item-icon { color: var(--rm-up-bad); font-weight: 700; }
.rm-up-item-name {
	flex: 1; min-width: 0; font-size: 13px; font-weight: 600; color: #1e293b;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rm-up-item-size { flex: none; font-size: 11px; color: #94a3b8; font-variant-numeric: tabular-nums; }

.rm-up-bar { margin-top: 8px; height: 6px; border-radius: 99px; background: #e2e8f0; overflow: hidden; }
.rm-up-bar-fill {
	height: 100%; border-radius: 99px;
	background: linear-gradient(90deg, #6366f1, #4f46e5);
	transition: width .18s linear;
}

.rm-up-item-foot {
	margin-top: 7px; display: flex; align-items: center; justify-content: space-between;
	gap: 8px; font-size: 12px;
}
.rm-up-status { color: #64748b; font-variant-numeric: tabular-nums; }
.rm-up-status.is-ok  { color: var(--rm-up-ok);  font-weight: 600; }
.rm-up-status.is-bad { color: var(--rm-up-bad); font-weight: 600; }

.rm-up-mini {
	border: 1px solid #cbd5e1; background: #fff; color: #475569;
	border-radius: 6px; padding: 3px 10px; font-size: 11px; font-weight: 600;
	cursor: pointer; line-height: 1.6;
}
.rm-up-mini:hover { border-color: #94a3b8; color: #1e293b; }
.rm-up-mini.is-retry { border-color: var(--rm-up-accent); color: var(--rm-up-accent); }

/* Requiredness is reported here, beside the field, rather than through native
   constraint validation — a visually hidden required control either cannot be
   focused (so Chrome blocks submit with no message at all) or points its
   message at something invisible. */
.rm-up-error {
	margin: 8px 0 0; padding: 8px 12px;
	border-radius: 8px;
	background: rgba(220, 38, 38, .08);
	border: 1px solid rgba(220, 38, 38, .25);
	color: var(--rm-up-bad); font-size: 12px; font-weight: 600;
}
.rm-up-error[hidden] { display: none; }
.rm-up.has-error .rm-up-drop { border-color: var(--rm-up-bad); background: rgba(220, 38, 38, .04); }

@media (max-width: 600px) {
	.rm-up-drop { padding: 18px 12px; }
	.rm-up-item-foot { flex-wrap: wrap; }
}

/* ---- Attachments, as rendered in submissions / portals ---- */

.rm-att { display: grid; gap: 10px; margin-top: 4px; }
.rm-att-item {
	display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
	border: 1px solid #e2e8f0; border-radius: 10px; padding: 10px 12px; background: #fff;
}
.rm-att-icon { font-size: 16px; flex: none; }
.rm-att-name {
	flex: 1; min-width: 120px; font-size: 13px; font-weight: 600; color: #1e293b;
	overflow-wrap: break-word; word-break: break-word;
}
.rm-att-meta { font-size: 11px; color: #94a3b8; flex: none; }
.rm-att-actions { display: flex; gap: 6px; flex: none; }
.rm-att-btn {
	display: inline-flex; align-items: center; gap: 4px;
	border: 1px solid #cbd5e1; background: #fff; color: #475569; text-decoration: none;
	border-radius: 6px; padding: 5px 12px; font-size: 12px; font-weight: 600; cursor: pointer;
}
.rm-att-btn:hover { border-color: #6366f1; color: #6366f1; }
.rm-att-media { width: 100%; margin-top: 8px; }
.rm-att-media video, .rm-att-media audio { width: 100%; border-radius: 8px; background: #000; display: block; }
.rm-att-media img { max-width: 100%; height: auto; border-radius: 8px; display: block; }
.rm-att-expired { font-size: 11px; color: #b45309; }

@media (max-width: 600px) {
	.rm-att-item { align-items: flex-start; }
	.rm-att-actions { width: 100%; }
	.rm-att-btn { flex: 1; justify-content: center; }
}