control, then its .form-text
right half
Fields are dealt LEFT half first, then RIGHT, balanced so the dialog is about
as tall on both sides. A form is READ, not scrolled: one stack of ten fields
pushes Save below the fold, and the button is then the thing people miss.
Real Bootstrap rows and columns, not a CSS grid pretending to be them - the
markup says what it does, and `col-3` is a width anyone can change without
reading this file. What lives HERE is only what would otherwise be repeated on
every label in eleven forms. */
.form-modal .col-form-label {
text-align: right;
}
/* Right-aligned only while the label is actually beside its control. Below lg the
grid stacks them, and a right-aligned label above a full-width input reads as a
mistake rather than as alignment. */
@media (max-width: 991.98px) {
.form-modal .col-form-label {
text-align: left;
padding-bottom: 0;
}
}
/* A switch has no baseline of its own, so it sits high against a label that does. */
.form-modal .form-check.form-switch {
padding-top: .4rem;
}
/* The loading indicator - the organisation's mark over a spinner. The markup comes from
loadingMark() in include/_functions.cfm, which is the ONE place it is written; this is
the one place it is styled. It appears in the modal body before a form arrives and in
the DataTables processing overlay, so it has to sit correctly in both.
The mark is capped rather than sized: logo_small is whatever each organisation loaded
and the files are not a uniform square, so a fixed height would stretch one deployment's
logo to fit another's proportions. NEVER RECOLOURED - brandbook page 17 - so no filter
or opacity is applied to make it sit better on a background. */
.app-loading {
display: flex;
flex-direction: column;
align-items: center;
gap: .5rem;
}
/* THE GLOBAL STANDARD (2026-10-28): every wait for content is this one - uocLoading("words") in script, the
uoc_core/_loading.html include on the server. On its own in a modal body it gets room to breathe. */
.modal-body > .app-loading { padding: 2rem 0; }
.app-loading-mark {
max-height: 2.5rem;
max-width: 8rem;
width: auto;
}
/* THE FOUR DOTS, and they are ours now rather than DataTables'. DataTables appends its
own set under whatever language.processing returns, so a loading TABLE had them and a
loading pane, modal or tab did not - one indicator that looked like two things. The
markup moved into loadingMark(), which every wait in the application already uses, and
the geometry and the timings below are DataTables' own so that nothing on screen moved
when it did.
The vendor's set is hidden rather than reused: it is appended after the text and is the
container's last child, and with ours in the markup a table would otherwise show eight
dots. Safe because language.processing is set globally in _footer2.cfm, so every table
here carries our indicator. */
div.dt-processing > div:last-child {
display: none;
}
.app-loading-dots {
position: relative;
display: block;
width: 80px;
height: 13px;
}
.app-loading-dots > span {
position: absolute;
top: 0;
width: 13px;
height: 13px;
border-radius: 50%;
/* THE BRANDBOOK'S PURPLE, not Bootstrap's blue. This was rgb(13, 110, 253) - the
literal DataTables ships, carried over with the geometry when the dots moved into
loadingMark() and missed by the remap, which is exactly the trap CLAUDE.md names:
a COMPONENT compiles the blue into itself and the --bs-*-rgb variables never reach
it. The one blue thing left on a purple screen was the thing shown while somebody
waited, which is the worst thing to have it be. */
background: var(--bs-primary);
animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
.app-loading-dots > span:nth-child(1) { left: 8px; animation: ums-loader-1 .6s infinite; }
.app-loading-dots > span:nth-child(2) { left: 8px; animation: ums-loader-2 .6s infinite; }
.app-loading-dots > span:nth-child(3) { left: 32px; animation: ums-loader-2 .6s infinite; }
.app-loading-dots > span:nth-child(4) { left: 56px; animation: ums-loader-3 .6s infinite; }
/* THE COMPACT ONE - inside a table, where the card around it is already on screen. It
is the same indicator with the organisation's mark left off (loadingMark(.., false)),
so the only thing to say here is that it sits on one line rather than stacked. */
.app-loading-sm {
flex-direction: row;
align-items: center;
gap: .75rem;
/* IT WRAPPED, and "Loading, please / wait..." over a row of dots is the shape of a
broken screen rather than a busy one - which is what somebody is looking at when
they are already waiting. Two things caused it: the box below is narrower than the
words, and the dots are a fixed 80px that flex was free to take the space from. */
white-space: nowrap;
}
.app-loading-sm > span:first-child {
flex: 0 1 auto;
}
.app-loading-sm > .app-loading-dots {
flex: 0 0 auto;
}
@keyframes ums-loader-1 { 0% { transform: scale(0) } 100% { transform: scale(1) } }
@keyframes ums-loader-2 { 0% { transform: translate(0, 0) } 100% { transform: translate(24px, 0) } }
@keyframes ums-loader-3 { 0% { transform: scale(1) } 100% { transform: scale(0) } }
/* ------------------------------------------------- a section row inside a table ---
The grouping rows in a long table - an academic session heading over its class
groups, "Excluded by design" over the counts it covers - were Bootstrap's
.table-light. That class PINS a light background: it sets --bs-table-bg to #f8f9fa
and --bs-table-color to black outright, so in dark mode it painted a bright band
across the table with black text on it, which is the one thing on the page that
does not follow the theme.
.table-group reads the theme's own variables instead. Bootstrap redefines
--bs-secondary-bg and --bs-emphasis-color under [data-bs-theme="dark"], so the row
sits one step off the table's ground in either mode without naming a colour here.
The striped and hover values are set too, or a striped table repaints the row on
alternate draws and a hover lightens the one thing meant to read as a heading. */
.table-group,
.table > :not(caption) > tr.table-group > * {
--bs-table-color: var(--bs-emphasis-color);
--bs-table-bg: var(--bs-secondary-bg);
--bs-table-border-color: var(--bs-border-color);
--bs-table-striped-bg: var(--bs-secondary-bg);
--bs-table-striped-color: var(--bs-emphasis-color);
--bs-table-hover-bg: var(--bs-secondary-bg);
--bs-table-hover-color: var(--bs-emphasis-color);
color: var(--bs-emphasis-color);
background-color: var(--bs-secondary-bg);
}
/* ------------------------------------------------------------- a quiet badge ---
The badge that says a thing is off, inactive, inherited, draft, retired - the
one that has to read as "less than the others" - was Bootstrap's .text-bg-light.
That class PINS its colours: --bs-light is #f8f9fa whatever the theme, and
.text-bg-* computes black text against it. In dark mode that made the quietest
badge on the page the brightest thing on it, a white chip on a near-black table.
.text-bg-soft reads the theme's own variables instead. Bootstrap redefines
--bs-secondary-bg and --bs-emphasis-color under [data-bs-theme="dark"], so the
badge sits one step off the surface either way without naming a colour here.
The border is what keeps it a badge rather than a smudge: at one step off the
surface there is not enough contrast to read as a chip on its own. */
.text-bg-soft {
color: var(--bs-emphasis-color) !important;
background-color: var(--bs-secondary-bg) !important;
border: 1px solid var(--bs-border-color);
}
/* --------------------------------------------- a note under a card ---
Six of the person tabs end with a sentence explaining what the list above does
NOT say - that the file is not held here, that an unpublished session is treated
as deleted, that a re-sit with no mark is a registration. They were loose
.form-text under the table, which reads as a stray line rather than as part of
the panel.
A real .card-footer cannot be used: the tabs render inside the card's BODY, and a
footer has to be a sibling of it. So this takes the footer's own variables and
bleeds to the card edges with negative margins matching the body's padding - the
same treatment, in the only place it can go.
Everything here is a Bootstrap card variable rather than a value, so it follows
the theme and any change to card padding, in both modes. */
.card-note {
margin: var(--bs-card-spacer-y) calc(-1 * var(--bs-card-spacer-x))
calc(-1 * var(--bs-card-spacer-y));
padding: var(--bs-card-cap-padding-y) var(--bs-card-cap-padding-x);
background-color: var(--bs-card-cap-bg);
border-top: var(--bs-card-border-width) solid var(--bs-card-border-color);
border-radius: 0 0 var(--bs-card-inner-border-radius) var(--bs-card-inner-border-radius);
font-size: .875em;
color: var(--bs-secondary-color);
}
/* ------------------------------------------------------ the budget entry grid ---
Accounts down, periods across, with the account column frozen at the left and the
totals (and the remove button, where there is one) frozen at the right. It lives here
rather than in a