/* UTI Fund Uploads - the upload page. One accent (--ufu-accent) to change. */
.ufu { --ufu-accent: #F5821F; --ufu-accent-ink: #fff; --ufu-ink: #1F2A33; --ufu-muted: #66737D; --ufu-line: #E3E7EA; --ufu-soft: #F6F8F9;
	--ufu-bad: #B42318; --ufu-bad-bg: #FEF3F2; --ufu-ok: #067647; --ufu-ok-bg: #ECFDF3; --ufu-warn: #93370D; --ufu-warn-bg: #FFFAEB;
	display: grid; gap: 22px; max-width: 1180px; margin: 0 auto 40px; color: var(--ufu-ink); font-size: 15px; line-height: 1.5; }
.ufu *, .ufu *::before, .ufu *::after { box-sizing: border-box; }
.ufu[hidden] { display: none !important; }
.ufu h2 { margin: 0 0 4px; font-size: 26px; }
.ufu h3 { margin: 0; font-size: 19px; }
.ufu-sub { margin: 0; color: var(--ufu-muted); }
.ufu-muted { color: var(--ufu-muted); }
.ufu-card { background: #fff; border: 1px solid var(--ufu-line); border-radius: 14px; padding: 24px; box-shadow: 0 16px 36px -28px rgba(16, 24, 40, .45); }
.ufu-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.ufu-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.ufu-count { color: var(--ufu-muted); font-weight: 500; }

.ufu-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 20px; border: 1px solid var(--ufu-accent); border-radius: 10px; background: var(--ufu-accent); color: var(--ufu-accent-ink); font: inherit; font-weight: 700; cursor: pointer; transition: filter .15s; }
.ufu-btn:hover { filter: brightness(1.06); }
.ufu-btn:disabled { opacity: .55; cursor: not-allowed; filter: none; }
.ufu-btn--ghost { background: #fff; color: var(--ufu-ink); border-color: var(--ufu-line); }
.ufu-btn--sm { padding: 7px 12px; font-size: 14px; font-weight: 600; }
.ufu-link { background: none; border: 0; padding: 0; color: var(--ufu-accent); font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; }
.ufu-link:hover { text-decoration: underline; }
.ufu-link.is-danger { color: var(--ufu-bad); }
.ufu-link.is-sure { background: var(--ufu-bad); color: #fff; padding: 2px 8px; border-radius: 6px; }

/* the PIN page */
.ufu-lock { max-width: 440px; }
.ufu-lockform { display: grid; gap: 14px; text-align: center; }
.ufu-lockicon { width: 54px; height: 54px; margin: 0 auto; display: grid; place-items: center; border-radius: 50%; background: #FFF1E5; color: var(--ufu-accent); }
.ufu-lockform input { width: 100%; padding: 12px 14px; border: 1px solid #CFD6DA; border-radius: 10px; font: inherit; font-size: 18px; letter-spacing: .2em; text-align: center; }
.ufu-lockform input:focus { outline: 2px solid var(--ufu-accent); outline-offset: 1px; border-color: transparent; }
.ufu-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.ufu-note { padding: 14px 16px; border-radius: 10px; background: var(--ufu-soft); }

/* steps and the drop zone */
/* the stepper: numbered circles joined by a line; done = check, current = accent, upcoming = grey outline */
.ufu-stepper { display: flex; margin: 0 0 20px; padding: 0; list-style: none; counter-reset: none; }
.ufu-stepper li { position: relative; display: flex; flex: 1 1 0; align-items: center; gap: 10px; min-width: 0; margin: 0; color: var(--ufu-muted); font-size: 15px; }
.ufu-stepper li:not(:last-child)::after { content: ''; flex: 1 1 auto; height: 2px; min-width: 16px; margin: 0 12px 0 2px; border-radius: 2px; background: var(--ufu-line); }
.ufu-stepper li.is-done:not(:last-child)::after { background: var(--ufu-accent); }
.ufu-stepper__dot { display: grid; flex: none; place-items: center; width: 34px; height: 34px; border: 2px solid #C9D1D6; border-radius: 50%; background: #fff; color: var(--ufu-muted); font-size: 15px; font-weight: 700; box-sizing: border-box; }
.ufu-stepper__dot b { font-weight: 700; }
.ufu-stepper__dot svg { display: none; width: 18px; height: 18px; }
.ufu-stepper__label { white-space: nowrap; font-weight: 600; }
.ufu-stepper li.is-current { color: var(--ufu-ink); }
.ufu-stepper li.is-current .ufu-stepper__dot { border-color: var(--ufu-accent); background: var(--ufu-accent); color: var(--ufu-accent-ink); box-shadow: 0 0 0 4px #FFE6D1; }
.ufu-stepper li.is-current .ufu-stepper__label { font-weight: 700; }
.ufu-stepper li.is-done { color: var(--ufu-ink); }
.ufu-stepper li.is-done .ufu-stepper__dot { border-color: var(--ufu-accent); background: var(--ufu-accent); color: var(--ufu-accent-ink); }
.ufu-stepper li.is-done .ufu-stepper__dot b { display: none; }
.ufu-stepper li.is-done .ufu-stepper__dot svg { display: block; }
@media (max-width: 600px) {
	.ufu-stepper li { flex-direction: column; gap: 6px; text-align: center; font-size: 14px; }
	.ufu-stepper li:not(:last-child)::after { position: absolute; top: 16px; left: calc(50% + 22px); right: calc(-50% + 22px); width: auto; min-width: 0; margin: 0; }
	.ufu-stepper__label { white-space: normal; }
}
.ufu-drop { position: relative; display: grid; justify-items: center; gap: 6px; padding: 34px 16px; border: 2px dashed #F8C9A0; border-radius: 14px; background: #FFFAF5; color: var(--ufu-accent); text-align: center; cursor: pointer; transition: background .2s, border-color .2s; }
.ufu-drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.ufu-drop strong { color: var(--ufu-ink); font-size: 17px; }
.ufu-drop small { color: var(--ufu-muted); font-size: 14px; }
.ufu-drop.is-over { background: #FFF1E5; border-color: var(--ufu-accent); }
.ufu-msg { margin: 12px 0 0; padding: 10px 14px; border-radius: 10px; font-size: 14px; }
.ufu-msg:empty { display: none; }
.ufu-msg.is-bad { background: var(--ufu-bad-bg); color: var(--ufu-bad); }
.ufu-msg.is-ok { background: var(--ufu-ok-bg); color: var(--ufu-ok); }

/* a file under review */
.ufu-reviews { display: grid; gap: 14px; margin-top: 16px; }
.ufu-review { border: 1px solid var(--ufu-line); border-radius: 12px; overflow: hidden; }
.ufu-review.is-busy { opacity: .85; }
.ufu-review.is-done { border-color: #ABEFC6; }
.ufu-review__head { padding: 12px 16px; background: var(--ufu-soft); border-bottom: 1px solid var(--ufu-line); }
.ufu-review__body { padding: 16px; display: grid; gap: 12px; }
.ufu-summary { display: flex; gap: 8px; flex-wrap: wrap; }
.ufu-pill { padding: 4px 12px; border-radius: 999px; background: var(--ufu-soft); font-size: 14px; font-weight: 600; }
.ufu-pill.is-ok { background: var(--ufu-ok-bg); color: var(--ufu-ok); }
.ufu-pill.is-bad { background: var(--ufu-bad-bg); color: var(--ufu-bad); }
.ufu-pill.is-warn { background: var(--ufu-warn-bg); color: var(--ufu-warn); }
.ufu-err { margin: 0; padding: 10px 14px; border-radius: 10px; background: var(--ufu-bad-bg); color: var(--ufu-bad); font-size: 14px; }
.ufu-warn { margin: 0; padding: 10px 14px; border-radius: 10px; background: var(--ufu-warn-bg); color: var(--ufu-warn); font-size: 14px; }
.ufu-ok { margin: 0; padding: 12px 14px; border-radius: 10px; background: var(--ufu-ok-bg); color: var(--ufu-ok); font-weight: 600; }
.ufu-h4 { margin: 4px 0 0; font-size: 15px; color: var(--ufu-bad); }
.ufu-mapbox summary, .ufu-preview summary { cursor: pointer; font-weight: 600; font-size: 14px; color: var(--ufu-muted); }
.ufu-map { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; padding: 14px; border-radius: 10px; background: var(--ufu-soft); }
.ufu-map label { display: grid; gap: 4px; font-size: 14px; font-weight: 600; flex: 1 1 180px; }
.ufu-map select, .ufu-map input[type=text] { width: 100%; padding: 8px 10px; border: 1px solid #CFD6DA; border-radius: 8px; font: inherit; background: #fff; }
.ufu-map .ufu-check { display: flex; align-items: center; gap: 8px; flex: 1 1 100%; font-weight: 500; }
.ufu-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ufu-progress { flex: 1 1 220px; position: relative; height: 10px; border-radius: 999px; background: var(--ufu-soft); overflow: hidden; }
.ufu-progress i { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--ufu-accent); transition: width .2s; }
.ufu-progress::after { content: attr(data-label); position: absolute; left: 0; top: 14px; font-size: 14px; color: var(--ufu-muted); white-space: nowrap; }
.ufu-actions:has(.ufu-progress:not([hidden])) { padding-bottom: 22px; }

/* tables */
.ufu-tablewrap { overflow: auto; border: 1px solid var(--ufu-line); border-radius: 10px; }
.ufu-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.ufu-table th, .ufu-table td { padding: 10px 12px; border-bottom: 1px solid var(--ufu-line); text-align: left; vertical-align: middle; }
.ufu-table th { background: var(--ufu-soft); font-weight: 600; white-space: nowrap; }
.ufu-table tbody tr:last-child td { border-bottom: 0; }
.ufu-table tbody tr:hover { background: #FCFCFD; }
.ufu-empty { color: var(--ufu-muted); text-align: center !important; padding: 18px !important; }
.ufu-fname strong { display: block; word-break: break-all; }
.ufu-fname small, .ufu-when { color: var(--ufu-muted); }
.ufu-fname small { display: block; }
.ufu-classes { max-width: 260px; }
.ufu-rowact { white-space: nowrap; text-align: right !important; }
.ufu-rowact > * + * { margin-left: 14px; }
.ufu-table--rows input { width: 100%; min-width: 110px; padding: 6px 8px; border: 1px solid #CFD6DA; border-radius: 6px; font: inherit; }
.ufu-table--rows input.is-bad { border-color: var(--ufu-bad); background: var(--ufu-bad-bg); }
.ufu-table--rows tr.is-bad td { background: #FFFBFA; }
.ufu-table--rows tr.is-fixed td { background: var(--ufu-ok-bg); }
.ufu-line { color: var(--ufu-muted); white-space: nowrap; }
.ufu-x { width: 28px; height: 28px; border: 1px solid var(--ufu-line); border-radius: 8px; background: #fff; color: var(--ufu-bad); font-size: 18px; line-height: 1; cursor: pointer; }
.ufu-search { padding: 8px 12px; border: 1px solid #CFD6DA; border-radius: 8px; font: inherit; min-width: 220px; }
.ufu-pager { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 14px; color: var(--ufu-muted); font-size: 14px; }
.ufu-pager:empty { display: none; }

@media (max-width: 700px) {
	.ufu-card { padding: 16px; }
	.ufu-top { flex-direction: column; }
	.ufu-search { min-width: 0; width: 100%; }
	.ufu-table th:nth-child(5), .ufu-table td.ufu-when { display: none; }
}

/* the names the file gives (fund name, class name, currency, ISIN) */
.ufu-names { margin: 0; padding: 10px 14px; list-style: none; border-radius: 10px; background: var(--ufu-soft); font-size: 14px; display: grid; gap: 4px; }
.ufu-fundnames { display: block; color: var(--ufu-ink); font-size: 14px; }
.ufu-classpick { display: grid; gap: 8px; padding: 14px; border: 1px solid #F8C9A0; border-radius: 10px; background: #FFFAF5; font-size: 14px; }
.ufu-classpick select { max-width: 520px; padding: 9px 10px; border: 1px solid #CFD6DA; border-radius: 8px; font: inherit; background: #fff; }