/*
 * LMS upload field (Phase 7, 2026-11-03): dist/js/lms-upload.js. Self-contained like lms-files.css: every rule is under
 * .lmsu, so it sits on the Bootstrap 3 admin/portal and the Bootstrap 5 redesign. --lms-accent is the site's PRIMARY_COLOR.
 */
.lmsu, .lmsu-dialog {
 --lmsu-accent: var(--lms-accent, #0085b0);
 --lmsu-bg: #ffffff;
 --lmsu-panel: #f6f8fa;
 --lmsu-line: #cfd7df;
 --lmsu-text: #1f2933;
 --lmsu-muted: #5f6b77;
 --lmsu-danger: #b42318;
 font: 14px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
 color: var(--lmsu-text);
}
.lmsu *, .lmsu-dialog *, .lmsu-dialog *::before, .lmsu-dialog *::after { box-sizing: border-box; }
.lmsu [hidden], .lmsu-dialog [hidden] { display: none !important; }
.lmsu p, .lmsu-dialog p, .lmsu-dialog h2 { margin: 0; }

/* The real input stays in the form (it is what posts) but out of sight; Bootstrap 3 makes file inputs display: block */
.lmsu input.lmsu-native { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden; clip: rect(0 0 0 0); border: 0 !important; opacity: 0; }
.lmsu { position: relative; display: flex; flex-direction: column; gap: 8px; }

.lmsu-zone { padding: 14px 16px; border: 1.5px dashed var(--lmsu-line); border-radius: 8px; background: var(--lmsu-panel); transition: border-color .15s, background .15s; }
.lmsu-zone.lmsu-over { border-color: var(--lmsu-accent); background: color-mix(in srgb, var(--lmsu-accent) 8%, #fff); }
.lmsu-zone-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.lmsu-or { color: var(--lmsu-muted); }
.lmsu-hint { margin-top: 6px !important; color: var(--lmsu-muted); font-size: 12.5px; }

.lmsu-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 6px 14px; border: 1px solid var(--lmsu-line); border-radius: 6px; background: var(--lmsu-bg); color: var(--lmsu-text); font: inherit; font-weight: 500; cursor: pointer; }
.lmsu-btn:hover { border-color: var(--lmsu-accent); color: var(--lmsu-accent); }
.lmsu-btn:focus-visible { outline: 2px solid var(--lmsu-accent); outline-offset: 2px; }
.lmsu-btn:disabled { opacity: .55; cursor: not-allowed; }
.lmsu-zone .lmsu-btn { border-color: var(--lmsu-accent); color: var(--lmsu-accent); }
.lmsu-primary, .lmsu-primary:hover { border-color: var(--lmsu-accent); background: var(--lmsu-accent); color: #fff; }
.lmsu-small { min-height: 30px; padding: 3px 10px; font-size: 13px; }

.lmsu-list { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.lmsu-list:empty { display: none; }
.lmsu-item { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border: 1px solid var(--lmsu-line); border-radius: 6px; background: var(--lmsu-bg); }
.lmsu-thumb { flex: none; width: 44px; height: 44px; border-radius: 4px; object-fit: cover; background: var(--lmsu-panel); }
.lmsu-photo .lmsu-thumb { width: 64px; height: 64px; border-radius: 50%; }
.lmsu-ext { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 4px; background: var(--lmsu-panel); color: var(--lmsu-muted); font-size: 11px; font-weight: 600; }
.lmsu-name { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lmsu-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lmsu-name small { color: var(--lmsu-muted); font-size: 12px; }

.lmsu-current { display: flex; align-items: center; gap: 10px; }
.lmsu-current-text { display: flex; flex-direction: column; min-width: 0; }
.lmsu-label { font-weight: 600; font-size: 13px; }
.lmsu-replace { color: var(--lmsu-muted); font-size: 12.5px; }
.lmsu-current a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.lmsu-msg:empty { display: none; }
.lmsu-msg p { padding: 6px 10px; border-left: 3px solid var(--lmsu-danger); background: #fdf1f0; color: var(--lmsu-danger); font-size: 13px; }

.lmsu-dialog { width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 18px; border: 0; border-radius: 10px; background: var(--lmsu-bg); box-shadow: 0 20px 60px rgba(15, 23, 42, .28); }
.lmsu-dialog[open] { display: flex; flex-direction: column; gap: 10px; }
.lmsu-dialog::backdrop { background: rgba(15, 23, 42, .45); }
.lmsu-dialog h2 { font-size: 17px; font-weight: 600; }
.lmsu-stage { height: min(360px, 55vh); background: #2b3138; border-radius: 6px; overflow: hidden; }
.lmsu-stage img { display: block; max-width: 100%; }
.lmsu-dialog .cropper-view-box { outline-color: var(--lmsu-accent); border-radius: 50%; }
.lmsu-dialog .cropper-face { border-radius: 50%; }
.lmsu-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.lmsu-gap { flex: 1; }
.lmsu-dialog .lmsu-hint[role=status] { min-height: 1.4em; margin-top: 0 !important; color: var(--lmsu-danger); }

@media (max-width: 480px) {
 .lmsu-actions .lmsu-btn { flex: 1 1 40%; }
 .lmsu-gap { display: none; }
}