/* Mains Test Series + Answer Writing (Saffron redesign, group E) — shared page styles.
   Colours only through var(--vr-…) so dark mode works. Pairs with js/pages/mains_common.js. */

.mu-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; font-size: 13px; color: var(--vr-muted); }
.mu-crumbs a { color: var(--vr-muted); text-decoration: none; }
.mu-crumbs a:hover { color: var(--vr-accent-ink); text-decoration: underline; }

/* Toolbar of filters above a table */
.mu-toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.mu-toolbar > .vr-field { flex: 1 1 220px; min-width: 0; margin: 0; }
.mu-toolbar > .mu-toolbar__actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.mu-input-sm { height: 42px; border-radius: 12px; font-size: 14px; }
select.vr-input[multiple] { height: auto; min-height: 96px; padding: 8px; }
textarea.vr-input { height: auto; min-height: 96px; padding: 12px 16px; line-height: 1.5; resize: vertical; }

/* Tables */
.vr-dtable.mu-dtable th, .vr-dtable.mu-dtable td { vertical-align: top; }
.vr-dtable.mu-dtable thead th { position: sticky; top: 0; background: var(--vr-card); z-index: 1; }
.vr-dtable.mu-dtable td { border-top: 1px solid var(--vr-line); }
/* positioned cells: .vr-sr-only labels (position:absolute) stay inside the scrolling .vr-table-wrap */
.vr-dtable.mu-dtable td { position: relative; }
.vr-dtable.mu-dtable tbody tr:first-child td { border-top: 0; }
.vr-dtable.mu-dtable--grid th, .vr-dtable.mu-dtable--grid td { border: 1px solid var(--vr-line); }
.vr-dtable.mu-dtable--center th, .vr-dtable.mu-dtable--center td { text-align: center; }
.vr-dtable .mu-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.vr-dtable .mu-nowrap { white-space: nowrap; }
.mu-filters-row td { background: var(--vr-card-2); }
.mu-sortable { cursor: pointer; user-select: none; }
.mu-sortable::after { content: "↕"; margin-left: 6px; opacity: .35; font-size: 11px; }
.mu-sortable[aria-sort="ascending"]::after { content: "↑"; opacity: .9; }
.mu-sortable[aria-sort="descending"]::after { content: "↓"; opacity: .9; }
.mu-miss, .mu-filtered { display: none !important; }
.mu-cell-title { display: block; font-weight: 700; color: var(--vr-ink); }
.mu-cell-title a { color: inherit; text-decoration: none; }
.mu-cell-title a:hover { color: var(--vr-accent-ink); text-decoration: underline; }
.mu-cell-sub { display: block; font-size: 12px; color: var(--vr-muted); }
.mu-cell-sub a { color: inherit; }
.mu-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.mu-btn-sm { min-height: 32px; padding: 5px 12px; font-size: 12px; }
.mu-btn-danger { color: var(--vr-bad) !important; border-color: var(--vr-bad-soft); }
.mu-btn-danger:hover { background: var(--vr-bad-soft); }

/* Key/value facts */
.mu-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin: 0; }
.mu-facts > div { padding: 10px 14px; border-radius: 12px; background: var(--vr-card-2); min-width: 0; }
.mu-facts dt { font-size: 12px; color: var(--vr-muted); font-weight: 600; }
.mu-facts dd { margin: 2px 0 0; font-size: 14px; font-weight: 700; overflow-wrap: anywhere; }

/* Upload widget */
.mu-upload { display: flex; flex-direction: column; gap: 8px; }
.mu-upload__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.mu-upload__list:empty { display: none; }
.mu-file { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 9px 12px; border-radius: 12px; background: var(--vr-card-2); border: 1px solid var(--vr-line); font-size: 13px; }
.mu-file__icon { width: 8px; height: 8px; border-radius: 50%; background: var(--vr-skip); flex: none; }
.mu-file.is-uploaded .mu-file__icon { background: var(--vr-good); }
.mu-file.is-error { background: var(--vr-bad-soft); border-color: transparent; }
.mu-file.is-error .mu-file__icon { background: var(--vr-bad); }
.mu-file__name { flex: 1 1 140px; min-width: 0; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mu-file__name a { color: inherit; }
.mu-file__size { font-size: 12px; color: var(--vr-muted); }
.mu-file__bar { flex: 0 0 90px; height: 6px; border-radius: 999px; background: var(--vr-ghost-a); overflow: hidden; }
.mu-file__bar > span { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--vr-accent); transition: width .2s; }
.mu-file.is-uploaded .mu-file__bar > span { background: var(--vr-good); }
.mu-file__msg { flex-basis: 100%; font-size: 12px; font-weight: 600; color: var(--vr-bad); }
.mu-file__msg:empty { display: none; }
.mu-file__del { width: 28px; height: 28px; flex: none; border: 0; border-radius: 8px; background: transparent; color: var(--vr-muted); font-size: 18px; line-height: 1; cursor: pointer; }
.mu-file__del:hover { background: var(--vr-bad-soft); color: var(--vr-bad); }
.mu-upload__pick { position: relative; align-self: flex-start; overflow: hidden; }
.mu-upload__pick input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; font-size: 0; }
.mu-upload__pick:focus-within { outline: 2px solid var(--vr-accent); outline-offset: 2px; }
.mu-upload__hint { margin: 0; font-size: 12px; color: var(--vr-muted); }

/* dd/mm/yyyy date fields */
.mu-date { position: relative; display: block; }
.mu-date > .vr-input { padding-right: 48px; }
.mu-date__native { position: absolute; right: 8px; bottom: 0; width: 1px; height: 1px; opacity: 0; border: 0; padding: 0; pointer-events: none; }
.mu-date__btn { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border: 0; border-radius: 10px; background: transparent; color: var(--vr-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.mu-date__btn:hover { background: var(--vr-card-2); color: var(--vr-ink); }

/* Dialog sizes */
.vr-dialog.mu-dialog--lg { width: min(920px, calc(100vw - 32px)); }
.vr-dialog.mu-dialog--xl { width: min(1180px, calc(100vw - 32px)); }
.vr-dialog .vr-dialog__body > .vr-form { gap: 14px; }

/* Misc */
.mu-required { color: var(--vr-bad); }
.mu-pre { white-space: pre-line; }
.mu-divider { border: 0; border-top: 1px solid var(--vr-line); margin: 4px 0; }
.mu-inline-form { display: inline; margin: 0; }
.mu-pager { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; align-items: center; }
.mu-pager a, .mu-pager span { min-width: 38px; height: 38px; padding: 0 14px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; border: 1px solid var(--vr-line); color: var(--vr-ink-2); text-decoration: none; font-size: 13px; font-weight: 700; }
.mu-pager [aria-current="page"] { background: var(--vr-pill-on); border-color: var(--vr-pill-on); color: var(--vr-pill-on-ink); }
.mu-radio-row { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.mu-check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px 16px; }
.mu-sticky { position: sticky; top: calc(var(--vr-topbar-h) + 16px); }
@media (max-width: 1024px) { .mu-sticky { position: static; } }

/* GET filter bars above tables: fields flow into as many columns as fit */
.mu-filters { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; align-items: end; }
.mu-filters > .vr-field { margin: 0; min-width: 0; }
.mu-filters__wide { grid-column: span 2; }
@media (max-width: 560px) { .mu-filters__wide { grid-column: auto; } }
.mu-filters > .mu-toolbar__actions { align-self: end; }
.mu-search { max-width: 280px; }
@media (max-width: 560px) { .mu-search { max-width: none; } }
.mu-text-bad { color: var(--vr-bad) !important; font-weight: 700; }
.mu-text-good { color: var(--vr-good) !important; font-weight: 700; }

/* Small label/number grid inside a table cell (Full 3 · Half 1 · Mini 0) */
.mu-mini-grid { display: grid; grid-template-columns: auto auto; justify-content: start; gap: 2px 10px; font-size: 12px; }
.mu-mini-grid > span { color: var(--vr-muted); }
.mu-mini-grid > strong { font-variant-numeric: tabular-nums; color: var(--vr-ink); white-space: nowrap; }

/* Submission status: custom_tags|submission_status_label still returns the old label markup;
   these rules draw it as chips without touching the shared filter. */
.mu-status { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; font-size: 12px; color: var(--vr-ink-2); }
.mu-status small { color: var(--vr-muted); }
.mu-status-note { margin-top: 6px; font-size: 12px; }
.mu-bulk-status--PR { background: var(--vr-good-soft); color: var(--vr-good); }
.mu-bulk-status--FL { background: var(--vr-bad-soft); color: var(--vr-bad); }
.mu-bulk-status--IN { background: var(--vr-info-soft); color: var(--vr-info); }
.mu-bulk-status--PE, .mu-bulk-status--SK { background: var(--vr-warn-soft); color: var(--vr-warn); }
.mu-status-stats .vr-stat { flex: 1 1 150px; }

/* Toasts (MainsUI.toast) */
.mu-toasts { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 2000; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; width: max-content; max-width: calc(100vw - 32px); }
.mu-toast { padding: 12px 18px; border-radius: 14px; background: var(--vr-pill-on); color: var(--vr-pill-on-ink); font-size: 13px; font-weight: 700; box-shadow: var(--vr-shadow-pop); animation: mu-toast-in .18s ease-out; }
.mu-toast--error { background: var(--vr-bad); color: #FFFFFF; }
@keyframes mu-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .mu-toast { animation: none; } }
.mu-json { display: block; max-width: 360px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 11.5px; color: var(--vr-ink-2); background: var(--vr-card-2); border-radius: 8px; padding: 6px 8px; }
.mu-json:empty { display: none; }
.mu-inline-field { flex-direction: row; align-items: center; gap: 10px; margin: 0; }
.mu-inline-field .vr-input { width: auto; min-width: 200px; }
.vr-icon-btn.mu-icon-btn--accent { background: var(--vr-accent); border-color: var(--vr-accent); color: var(--vr-on-accent) !important; }
.vr-icon-btn.mu-icon-btn--accent:hover { filter: brightness(1.06); background: var(--vr-accent); color: var(--vr-on-accent) !important; }

/* Non-modal dialogs over our own scrim (mains_common.js showDialog) */
.mu-scrim { position: fixed; inset: 0; z-index: 1100; background: rgba(0, 0, 0, .45); }
.mu-scrim[hidden] { display: none; }
.vr-dialog.mu-dialog--floating { position: fixed; inset: 0; margin: auto; z-index: 1101; height: fit-content; max-height: calc(100vh - 64px); max-height: calc(100dvh - 64px); display: flex; flex-direction: column; overflow: hidden; }
.vr-dialog.mu-dialog--floating:not([open]) { display: none; }
.vr-dialog.mu-dialog--floating .vr-dialog__body { flex: 1 1 auto; max-height: none; overflow: auto; }
html.mu-dialog-open { overflow: hidden; }

/* Phone card layout: keep every child of a labelled cell in the value column
   (vr-core puts the label in column 1; a cell with two children would otherwise wrap under it). */
@media (max-width: 760px) {
  .mu-dtable.vr-dtable--stack td[data-label]:not([data-label=""]) > * { grid-column: 2; }
  .mu-dtable.vr-dtable--stack .mu-actions, .mu-dtable.vr-dtable--stack .vr-actions { flex-wrap: wrap; }
}