on
* the page — the shell used to render one, which put two competing page titles
* on every one of the internal pages and left screen-reader users to choose
* between them. */
.header-title {
margin: 0;
font-family: var(--font-ui);
font-size: var(--type-subhead);
font-weight: 700;
color: var(--ink);
line-height: 1.25;
}
.header-title-row h1 {
margin: 0;
font-family: var(--font-ui);
font-size: var(--type-subhead);
font-weight: 700;
color: var(--ink);
}
.app-content .form-control:focus,
.app-content .form-select:focus,
.app-content textarea.form-control:focus {
border-color: var(--brand-ink);
box-shadow: 0 0 0 4px var(--brand-veil);
}
.theme-toggle-btn {
position: relative;
overflow: hidden;
}
.theme-icon {
position: absolute;
font-size: var(--type-title);
transition: transform var(--dur-base), opacity var(--dur-base);
}
.theme-toggle-btn .sun {
opacity: 0;
transform: rotate(-70deg) scale(0.4);
}
.theme-toggle-btn .moon {
opacity: 1;
transform: rotate(0) scale(1);
}
[data-theme="dark"] .theme-toggle-btn .sun {
opacity: 1;
transform: rotate(0) scale(1);
}
[data-theme="dark"] .theme-toggle-btn .moon {
opacity: 0;
transform: rotate(70deg) scale(0.4);
}
.user-btn {
display: inline-flex;
align-items: center;
gap: 0.75rem;
padding: 0.32rem 0.8rem 0.32rem 0.38rem;
/* A control you have to aim at takes --rule-strong, like every other field. */
border: 1px solid var(--rule-strong);
border-radius: 8px;
background: var(--surface);
box-shadow: none;
color: var(--ink);
}
.user-avatar {
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-md);
background: var(--brand);
color: var(--on-brand);
}
.user-copy {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.user-name {
font-size: var(--type-body);
font-weight: 700;
}
.user-role {
font-size: var(--type-micro);
color: var(--ink-muted);
}
.header-user .dropdown-menu,
.dropdown-menu {
border: 1px solid var(--rule);
border-radius: 8px;
background: var(--surface);
box-shadow: var(--shadow);
padding: 0.45rem;
}
/* Menu rows, not menu lines.
*
* Bootstrap's own .dropdown-item is a 32.5px strip with the icon inline against
* the label and no separation at all — the glyph and the word read as one
* smudge, and the row is too short to hit with a thumb. On a phone, where the
* header collapses to the avatar and this menu is the only way out of the
* session, that target is the whole interaction. */
.dropdown-item {
display: flex;
align-items: center;
gap: 0.55rem;
min-height: 44px;
padding: 0.5rem 0.75rem;
border-radius: var(--radius-sm);
color: var(--ink-2);
transition: background var(--dur-fast), color var(--dur-fast);
}
.dropdown-item i {
flex: 0 0 auto;
font-size: var(--type-title);
}
.dropdown-item:hover,
.dropdown-item:focus {
background: var(--surface-2);
color: var(--ink);
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
border-radius: var(--radius-md);
font-weight: 600;
transition: border-color var(--dur-fast), background var(--dur-fast), color var(--dur-fast);
}
/*
* Bootstrap ships .btn-sm at 31px, which is under the 44px floor this product holds
* itself to. The min-height above covers it, because .btn-sm sets padding and font
* size but never a height of its own. Icon-only .btn-sm controls are the one case
* min-height cannot rescue, since their width is just the glyph plus padding, so the
* floor is applied to width as well. Labelled buttons are already wider than 44px and
* are unaffected.
*/
.btn-sm,
.btn-group-sm > .btn {
min-width: 44px;
}
/*
* .table-light and .table-dark hardcode their own header background, which lands a
* fixed light box behind the tokenized --ink-2 header text and fails contrast in dark
* mode. Re-point both at the surface tokens so the header follows the theme.
*/
.app-content .table-light,
.app-content .table-dark {
--bs-table-bg: var(--surface-2);
--bs-table-color: var(--ink-2);
background-color: var(--surface-2);
color: var(--ink-2);
}
.btn-outline-secondary,
.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
border-color: var(--rule-strong);
background: var(--surface);
color: var(--ink-2);
}
.btn-outline-secondary:hover {
background: var(--surface-2);
color: var(--ink);
}
/*
* Bootstrap paints disabled controls with its own grey at opacity .65, which leaves
* the migrated surfaces showing an unmigrated colour. Disabled text is exempt from the
* contrast minimum, so read the state from muted ink and a muted rule instead.
*/
.btn:disabled,
.btn.disabled,
fieldset:disabled .btn {
border-color: var(--rule);
background: transparent;
color: var(--ink-muted);
opacity: 1;
cursor: not-allowed;
}
.btn-primary,
.app-content .btn-primary {
border-color: transparent;
background: var(--brand);
box-shadow: none;
}
.btn-primary:hover,
.btn-primary:focus,
.app-content .btn-primary:hover,
.app-content .btn-primary:focus {
border-color: transparent;
background: var(--brand-deep);
}
/* The disabled step has to come after the fill rules above. Declared before them,
* the brand fill won on order and painted the brand-ink label onto a brand-green
* button, so a disabled "Complete & Approve" read as a blank green bar. */
.btn-primary:disabled,
.btn-primary.disabled,
.app-content .btn-primary:disabled,
.app-content .btn-primary.disabled {
border-color: transparent;
background: var(--brand-veil);
color: var(--brand-ink);
}
.btn-ghost {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.74rem 1rem;
border: 1px solid var(--rule);
border-radius: var(--radius-md);
background: var(--surface);
color: var(--ink);
text-decoration: none;
}
.app-content {
flex: 1;
width: min(calc(100% - 3rem), var(--content-max));
margin: 1.25rem auto 0;
}
/*
* A wide data table scrolls inside its .table-responsive wrapper, but only if every
* flex and grid ancestor is allowed to shrink. Left at the default min-width:auto they
* each take the table's min-content width instead, so the scroller is stretched to the
* full table width and the page overflows on a phone. min-width:0 restores the
* containment, and the table then scrolls where it belongs.
*/
.app-main,
.app-content,
.app-content .row > *,
.app-content .card,
.app-content .card-body,
.app-content .data-panel__body {
min-width: 0;
}
/*
* Bootstrap's switch and checkbox are 32x16, well under the 44px target floor. The
* control is widened to the floor and the label carries the height, so the whole
* switch-plus-label row is the target. Bootstrap draws the switch with em units, so
* resizing the input scales the knob and track together.
*/
.app-content .form-switch {
min-height: 44px;
padding-left: 3.5rem;
}
.app-content .form-switch .form-check-input {
width: 2.75rem;
height: 1.5rem;
margin-left: -3.5rem;
padding-left: 2.75rem;
}
.app-content .form-check {
min-height: 44px;
}
/*
* min-height on the wrapper only reserves space; the label's own box is what is
* clickable, so the label carries the height for the target to actually be 44px.
*/
.app-content .form-switch .form-check-label {
display: flex;
align-items: center;
min-height: 44px;
}
/*
* A plain checkbox gets the same treatment: the box grows to 24px and the label beside it
* carries the 44px row, so the forecourt thumb hits the label rather than the glyph.
*/
.app-content .form-check:not(.form-switch) {
display: flex;
align-items: center;
gap: 0.75rem;
padding-left: 0;
}
.app-content .form-check:not(.form-switch) .form-check-input {
flex: none;
width: 1.5rem;
height: 1.5rem;
margin: 0;
}
.app-content .form-check:not(.form-switch) .form-check-label {
display: flex;
flex: 1;
align-items: center;
min-height: 44px;
}
.page-heading {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
gap: 1.5rem;
margin-bottom: 1rem;
padding: 1.3rem 1.35rem;
border: 1px solid var(--rule);
border-radius: var(--radius-md);
background: var(--surface);
box-shadow: var(--shadow-sm);
}
/* The copy claims a 20rem basis rather than its full sentence width, so the
* actions sit beside it until there is genuinely no room, then drop below it and
* wrap among themselves instead of pushing the page sideways at large text sizes. */
.page-heading__copy {
flex: 1 1 20rem;
min-width: 0;
}
.page-heading__eyebrow {
display: block;
margin-bottom: 0.35rem;
color: var(--brand-ink);
font-size: var(--type-label);
font-weight: 700;
letter-spacing: 0.09em;
text-transform: uppercase;
}
.page-heading h1,
.page-heading h2,
.page-heading h3,
.page-heading h4,
.page-heading h5,
.page-heading h6 {
margin: 0 0 0.25rem;
font-family: var(--font-ui);
font-size: var(--type-headline);
font-weight: 700;
line-height: 1.2;
letter-spacing: -0.02em;
}
/* The page heading is the one place a level-1 heading belongs on an internal
* page, so it takes the documented headline size whatever level it is written
* at. Bootstrap's own h1 is 2.5rem, which rendered the page title larger than
* every panel on the page. */
.page-heading p {
margin: 0;
max-width: 68ch;
color: var(--ink-muted);
font-size: var(--type-body);
}
.page-heading__actions {
display: flex;
flex: 0 1 auto;
flex-wrap: wrap;
min-width: 0;
align-items: center;
gap: 0.65rem;
}
.page-toolbar {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
gap: 1rem;
margin-bottom: 1rem;
padding: 1rem;
border: 1px solid var(--rule);
border-radius: var(--radius-md);
background: var(--surface);
}
/* A mixed set of controls has to read as one row of instruments, not as a grid
* of equal cells. An equal-1fr track gave a search box the same width as a
* three-word "Rows per page" picker, so on a two-track toolbar the third control
* wrapped onto a line of its own and left the toolbar 194px tall with a hole in
* it. The search box takes the leftover width; the pickers keep theirs. */
.page-toolbar__filters {
display: flex;
flex: 1 1 20rem;
flex-wrap: wrap;
align-items: flex-end;
gap: 0.75rem;
min-width: 0;
}
.page-toolbar__field {
flex: 0 1 auto;
min-width: 0;
}
.page-toolbar__field--grow {
flex: 1 1 16rem;
}
.page-toolbar__actions {
display: flex;
flex: 0 0 auto;
align-items: center;
gap: 0.65rem;
}
.data-panel {
overflow: hidden;
border: 1px solid var(--rule);
border-radius: var(--radius-md);
background: var(--surface);
box-shadow: var(--shadow-sm);
}
.data-panel__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0.9rem 1rem;
border-bottom: 1px solid var(--rule);
background: var(--surface-2);
}
.data-panel__header h2,
.data-panel__header h3 {
margin: 0;
font-family: var(--font-ui);
font-size: var(--type-lead);
font-weight: 700;
}
.data-panel__body {
padding: 1rem;
}
.data-panel__body--flush {
padding: 0;
}
.data-panel .table-responsive {
border-radius: 0;
}
.data-panel .table {
margin-bottom: 0;
}
.data-panel__footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0.85rem 1rem;
border-top: 1px solid var(--rule);
background: var(--surface-2);
}
/* ---------- Loading, empty, and error states ----------
* Every table on every internal page ends up in one of three conditions, and all
* three were previously written inline as a with a text-muted class and
* whatever vertical padding the author felt like, so the same three states sat at
* three different heights across the app. One component, three tones.
*
* The state cell is also the accessible part of an async table: it carries
* role="status" so the change from "Loading" to "No results" is announced rather
* than being a silent repaint. */
.empty-state {
padding: 2.75rem 1.5rem !important;
color: var(--ink-muted);
font-size: var(--type-body);
text-align: center;
vertical-align: middle;
}
.empty-state__inner {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
max-width: 34rem;
margin: 0 auto;
}
.empty-state__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.25rem;
height: 2.25rem;
margin-bottom: 0.15rem;
border-radius: var(--radius-pill);
background: var(--surface-2);
color: var(--ink-muted);
font-size: var(--type-title);
}
.empty-state__title {
color: var(--ink);
font-weight: 600;
}
.empty-state__hint {
color: var(--ink-muted);
font-size: var(--type-small);
}
/* A hint that tells the reader what to do next, not just what is missing. An
* empty state that only says "nothing here" is a dead end. */
.empty-state__action {
margin-top: 0.35rem;
}
.empty-state--loading {
color: var(--ink-muted);
}
/* A state cell or an expanded detail row spans every column, so on a phone it is as
* wide as the scrolling table and its content lands half off-screen. Pinning it to
* the scroller's visible width keeps it readable without the reader scrolling to
* find it. */
@media (max-width: 767px) {
.table-row-detail {
position: sticky;
left: 0;
width: calc(100vw - 3.5rem);
}
.empty-state__message {
position: sticky;
left: 0;
display: block;
max-width: calc(100vw - 4.75rem);
}
}
.empty-state--error {
color: var(--danger);
}
.empty-state--error .empty-state__icon {
background: var(--danger-soft);
color: var(--danger);
}
.empty-state--error .empty-state__title {
color: var(--danger);
}
/* One spinner, drawn from the palette, sized to the state block. A pulsing bar
* would be decoration; this reports that a request is in flight. */
.state-spinner {
display: inline-block;
width: 1.05rem;
height: 1.05rem;
border: 2px solid var(--rule);
border-top-color: var(--brand-ink);
border-radius: var(--radius-pill);
animation: state-spin 0.7s linear infinite;
}
@keyframes state-spin {
to {
transform: rotate(360deg);
}
}
@media (prefers-reduced-motion: reduce) {
.state-spinner {
animation: none;
border-top-color: var(--brand-ink);
}
}
.form-section {
padding: 1rem;
border: 1px solid var(--rule);
border-radius: var(--radius-sm);
background: var(--surface-2);
}
.form-section + .form-section {
margin-top: 1rem;
}
/* A fieldset legend, so the group name is announced with every field in it.
* Floated so it sits inside the section instead of on its border, and sized as
* a panel title rather than Bootstrap's display-size legend. */
.form-section__title {
float: left;
width: 100%;
margin: 0 0 0.75rem;
padding: 0;
color: var(--ink);
font-family: var(--font-ui);
font-size: var(--type-body);
font-weight: 700;
}
/* ---------- Table pager ----------
* The row of paging controls under a data table. It was a "d-flex
* justify-content-between" Bootstrap strip with a text-muted and a
* btn-group, which put paging at a different type size, weight, and border
* treatment from the toolbar that selected the page size it controls. */
.table-pager {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.75rem 1rem;
padding: 0.75rem 1rem;
border-top: 1px solid var(--rule);
background: var(--surface);
}
.table-pager__summary {
margin: 0;
color: var(--ink-muted);
font-size: var(--type-small);
font-variant-numeric: tabular-nums;
}
.table-pager__controls {
display: flex;
align-items: center;
gap: 0.5rem;
}
/* A readout between two buttons, not a third button: it is styled to sit at the
* same weight and size as the surrounding labels rather than as a control. */
.table-pager__indicator {
min-width: 5.5rem;
color: var(--ink-muted);
font-size: var(--type-small);
font-variant-numeric: tabular-nums;
text-align: center;
}
/* ---------- Account management (Identity Manage area) ----------
* The Manage pages render inside the app shell, so they take app.css rather
* than auth.css. The identity scaffolding shipped raw Bootstrap here; these
* rules re-express the same primitives every other app page already uses
* (.page-heading, .data-panel, .btn) and add only the three things this
* surface needs that the rest of the app does not: a destination rail, a
* status callout, and a readable way to display a value the user has to
* transcribe. */
/* A settings surface with six destinations needs a rail, not a tab strip: the
* item count does not fit one line on a phone and the current section has to
* stay visible while scrolling a long form. The rail is 15rem to stay inside
* the app's own 16rem instrument-panel idiom without competing with it. */
.manage-layout {
display: grid;
grid-template-columns: 15rem minmax(0, 1fr);
gap: 1.25rem;
align-items: start;
}
.manage-nav {
position: sticky;
top: calc(var(--header-height) + 1rem);
padding: 0.5rem;
border: 1px solid var(--rule);
border-radius: var(--radius-md);
background: var(--surface);
box-shadow: var(--shadow-sm);
}
.manage-nav__list {
margin: 0;
padding: 0;
list-style: none;
}
.manage-nav__list li + li {
margin-top: 0.15rem;
}
.manage-nav__link {
display: flex;
align-items: center;
gap: 0.7rem;
min-height: 44px;
padding: 0.5rem 0.7rem;
border-radius: var(--radius-sm);
color: var(--ink-2);
font-size: var(--type-body);
font-weight: 500;
text-decoration: none;
transition: background var(--dur-fast), color var(--dur-fast);
}
.manage-nav__link i {
width: 20px;
flex: none;
color: var(--ink-muted);
font-size: var(--type-title);
text-align: center;
}
.manage-nav__link:hover {
background: var(--surface-2);
color: var(--ink);
}
.manage-nav__link:hover i {
color: var(--brand-ink);
}
.manage-nav__link.active {
background: var(--brand-veil);
color: var(--brand-ink);
font-weight: 600;
box-shadow: inset 3px 0 0 var(--brand);
}
.manage-nav__link.active i {
color: var(--brand-ink);
}
.manage-body {
display: grid;
gap: 1.25rem;
min-width: 0;
}
.manage-body > * {
min-width: 0;
}
/* The area's page name. The sticky shell header already says which page this is, so
* this is not a second visible title competing with it — it is the document's
* level-1 heading, and the section headings below it are h2 underneath it. */
.manage-body__title {
margin: 0;
font-family: var(--font-ui);
font-size: var(--type-headline);
font-weight: 700;
line-height: 1.2;
letter-spacing: -0.02em;
}
/*
* A form field the user cannot edit is still a value they may need to read, copy,
* or quote to support. Bootstrap's disabled state greys the text and drops the
* value below the contrast floor, so the read-only case gets its own treatment
* on a sunk well instead: full-contrast ink, the muted fill the system already
* reserves for disabled, and a hairline rule rather than the aim-at border.
*/
.manage-readonly {
display: flex;
align-items: center;
gap: 0.6rem;
min-height: 44px;
padding: 0.6rem 0.85rem;
border: 1px solid var(--rule);
border-radius: var(--radius-sm);
background: var(--surface-2);
color: var(--ink);
font: 400 0.9375rem var(--font-mono);
font-variant-numeric: tabular-nums;
overflow-wrap: anywhere;
}
.manage-readonly--empty {
color: var(--ink-muted);
font-style: italic;
}
/* Settings quick stats. These were three s whose entire content was a number,
* so the document outline listed three empty sections between "Quick stats" and the
* next card. They are values, not headings, and this carries the visual weight the
* heading tag was supplying. */
.settings-stats__value {
font-family: var(--font-ui);
font-size: var(--type-metric);
font-weight: 700;
line-height: 1.1;
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
}
/* Status callout. The scaffolding used Bootstrap's .alert, which is a full-bleed
* Bootstrap box; this surface runs on .data-panel, so the callout is a panel with
* a tinted body and an icon rail. Each tone pairs its semantic colour with its
* -soft companion, as the design system requires of every colour behind text. */
.manage-callout {
display: flex;
gap: 0.75rem;
padding: 0.9rem 1rem;
border: 1px solid var(--rule);
border-radius: var(--radius-md);
background: var(--surface-2);
color: var(--ink-2);
font-size: var(--type-body);
}
.manage-callout > i {
flex: none;
margin-top: 0.1rem;
font-size: var(--type-title);
}
.manage-callout p {
margin: 0;
}
.manage-callout p + p,
.manage-callout p + .manage-callout__actions {
margin-top: 0.6rem;
}
.manage-callout__title {
color: var(--ink);
font-weight: 700;
}
.manage-callout--warn {
border-color: var(--warn);
background: var(--warn-soft);
color: var(--warn-ink);
}
.manage-callout--warn .manage-callout__title {
color: var(--warn-ink);
}
.manage-callout--warn > i {
color: var(--warn);
}
.manage-callout--danger {
border-color: var(--danger);
background: var(--danger-soft);
color: var(--danger);
}
.manage-callout--danger .manage-callout__title {
color: var(--danger);
}
.manage-callout--danger > i {
color: var(--danger);
}
.manage-callout__actions {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
}
/* Confirmation state on a value. The glyph alone would fail the rule that status
* is never carried by colour or shape alone, so every pill carries a word. */
.manage-pill {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.25rem 0.6rem;
border-radius: var(--radius-pill);
font: 700 0.7rem var(--font-mono);
letter-spacing: 0.08em;
text-transform: uppercase;
white-space: nowrap;
}
.manage-pill--positive {
background: var(--accent-wash);
color: var(--accent-ink);
}
.manage-pill--warn {
background: var(--warn-soft);
color: var(--warn-ink);
}
/* The two-factor setup key and the recovery codes are the two values in this
* product a person has to transcribe character by character, which is exactly
* what Space Mono is for. They are set larger than body copy, grouped so a
* dropped character is visible, and selectable so they can be copied rather
* than retyped. */
.manage-secret {
padding: 1rem 1.1rem;
border: 1px solid var(--rule);
border-radius: var(--radius-md);
background: var(--surface-sunk);
color: var(--ink);
font: 400 1.125rem/1.9 var(--font-mono);
font-variant-numeric: tabular-nums;
letter-spacing: 0.04em;
overflow-wrap: anywhere;
user-select: all;
}
.manage-secret + .manage-callout__actions {
margin-top: 0.75rem;
}
.manage-codes {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr));
gap: 0.5rem;
margin: 0;
padding: 0;
list-style: none;
counter-reset: recovery-code;
}
.manage-codes li {
padding: 0.5rem 0.7rem;
border: 1px solid var(--rule);
border-radius: var(--radius-sm);
background: var(--surface-sunk);
color: var(--ink);
font: 400 0.875rem var(--font-mono);
font-variant-numeric: tabular-nums;
text-align: center;
user-select: all;
}
/* The authenticator walkthrough is a sequence the reader has to follow in order,
* so the numbering carries information rather than decoration. */
.manage-steps {
margin: 0;
padding: 0;
list-style: none;
counter-reset: manage-step;
}
.manage-steps > li {
position: relative;
padding-left: 2.5rem;
counter-increment: manage-step;
}
.manage-steps > li + li {
margin-top: 1.25rem;
padding-top: 1.25rem;
border-top: 1px solid var(--rule);
}
.manage-steps > li::before {
position: absolute;
top: 0;
left: 0;
width: 1.6rem;
height: 1.6rem;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-pill);
background: var(--brand);
color: var(--on-brand);
font: 700 0.875rem var(--font-mono);
content: counter(manage-step);
}
.manage-steps > li + li::before {
top: 1.25rem;
}
.manage-steps h2 {
margin: 0 0 0.35rem;
font-size: var(--type-title);
font-weight: 700;
}
.manage-steps p {
margin: 0;
color: var(--ink-2);
font-size: var(--type-body);
}
.manage-step__aside {
margin-top: 0.75rem !important;
}
.manage-form {
max-width: 30rem;
}
.manage-form--wide {
max-width: none;
}
.manage-field + .manage-field {
margin-top: 1rem;
}
.manage-field__hint {
display: block;
margin-top: 0.4rem;
color: var(--ink-muted);
font-size: var(--type-small);
}
.manage-field__error {
display: block;
margin-top: 0.4rem;
color: var(--danger);
font-size: var(--type-small);
}
.manage-actions {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
margin-top: 1.15rem;
padding-top: 1.15rem;
border-top: 1px solid var(--rule);
}
.manage-actions--tight {
margin-top: 0.75rem;
padding-top: 0.75rem;
}
.manage-actions--plain {
margin-top: 0;
padding-top: 0;
border-top: 0;
}
.manage-logins {
width: 100%;
margin: 0;
}
.manage-logins th,
.manage-logins td {
padding: 0.7rem 0.75rem;
text-align: left;
vertical-align: middle;
}
.manage-logins th {
color: var(--ink-2);
font-size: var(--type-label);
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.manage-logins td:last-child,
.manage-logins th:last-child {
text-align: right;
}
.app-content .text-muted,
.app-content small.text-muted,
.app-content .small.text-muted {
color: var(--ink-muted) !important;
}
.app-content .row.mb-3 {
margin-bottom: 1rem !important;
}
.app-content .form-label {
margin-bottom: 0.45rem;
color: var(--ink-2);
font-size: var(--type-meta);
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.app-content .form-control,
.app-content .form-select,
.app-content textarea.form-control {
min-height: 44px;
border: 1px solid var(--rule-strong);
border-radius: var(--radius-md);
/* background-color, never the shorthand. The shorthand resets
* background-image to none, and Bootstrap draws the select caret from one —
* so `background:` here silently deleted the only thing on a select that says
* it opens something, app-wide. */
background-color: var(--surface);
color: var(--ink);
box-shadow: none;
}
/*
* A disabled control in a floating group colours its label from Bootstrap's own grey
* at (0,2,1), which outranks the .app-content .form-label rule above at (0,2,0). That
* is how the Identity profile page renders its read-only Username field. Disabled text
* is exempt from contrast, but it still has to come from the muted token so no
* unmigrated Bootstrap colour survives on a migrated surface.
*/
.app-content .form-floating > .form-control:disabled ~ label,
.app-content .form-floating > .form-control-plaintext:disabled ~ label,
.app-content .form-floating > .form-select:disabled ~ label,
.app-content .form-floating > :disabled ~ label {
color: var(--ink-muted);
}
.app-content textarea.form-control {
min-height: 96px;
}
.app-content .form-control::placeholder {
color: var(--ink-muted);
}
.app-content .btn-secondary {
background: var(--surface-2);
border-color: var(--rule);
color: var(--ink);
}
.app-content .btn-outline-primary {
color: var(--brand-ink);
border-color: var(--rule-strong);
}
.app-content .btn-outline-primary:hover {
background: var(--brand);
border-color: var(--brand-ink);
color: var(--on-brand);
}
.app-content .btn-outline-danger {
--bs-btn-active-color: var(--on-danger);
--bs-btn-active-bg: var(--danger);
--bs-btn-active-border-color: var(--danger);
color: var(--danger);
border-color: var(--danger-veil);
}
.app-content .btn-outline-danger:hover {
background: var(--danger);
border-color: var(--danger);
color: var(--on-danger);
}
.app-content .card,
.app-content .modal-content {
border: 1px solid var(--rule);
border-radius: var(--radius-md);
background: var(--surface);
box-shadow: var(--shadow-sm);
overflow: hidden;
}
[data-theme="dark"] .app-content .card,
[data-theme="dark"] .app-content .modal-content {
border-color: var(--rule);
background: var(--surface);
}
.app-content .card + .card,
.app-content .card + .row,
.app-content .row + .card {
margin-top: 1rem;
}
.app-content .card-header,
.app-content .modal-header,
.app-content .modal-footer {
padding: 1rem 1.2rem;
background: var(--tint);
border-color: var(--rule);
}
.app-content .card-body,
.app-content .modal-body {
padding: 1.15rem 1.2rem;
}
.app-content .card-title,
.app-content .modal-title {
margin: 0;
font-family: var(--font-ui);
font-size: var(--type-lead);
font-weight: 700;
color: var(--ink);
}
.app-content .table-responsive {
border-radius: var(--radius-md);
}
.app-content .table {
--bs-table-bg: transparent;
--bs-table-color: var(--ink);
--bs-table-striped-bg: var(--brand-ghost);
--bs-table-hover-bg: var(--brand-veil);
--bs-table-border-color: var(--rule);
margin-bottom: 0;
vertical-align: middle;
}
.app-content .table > :not(caption) > * > * {
padding: 0.84rem 0.75rem;
}
.app-content .table thead th {
border-top: 0;
color: var(--ink-2);
font-size: var(--type-micro);
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.app-content .table tbody td {
font-size: var(--type-body);
}
.app-content .badge {
border-radius: var(--radius-pill);
padding: 0.38em 0.64em;
font-weight: 700;
}
.app-content .badge.bg-info {
background-color: var(--surface-2) !important;
color: var(--ink-2) !important;
}
.app-content .badge.bg-success {
background-color: var(--brand-soft) !important;
color: var(--brand-ink) !important;
}
.app-content .badge.bg-warning {
background-color: var(--warn-soft) !important;
color: var(--warn-ink) !important;
}
.app-content .badge.bg-danger {
background-color: var(--danger-soft) !important;
color: var(--danger) !important;
}
.app-content .badge.bg-secondary {
background-color: var(--surface-2) !important;
color: var(--ink-muted) !important;
}
/* ---------- Status chip ----------
* The one component a status is drawn with. It replaces four private
* getStatusColor() implementations that disagreed about the same enum value, and
* it is rendered by FloatStatusDisplay.chipHtml() so the tone is decided in one
* place. The label is always present: the tone is a second, redundant channel,
* never the only one, which is what keeps it readable in greyscale and to a
* screen reader.
*
* Uppercase mono at the 0.7rem label size is the system's own micro-label role,
* so a status reads as instrumentation rather than as a sentence. */
/* Chips take the Micro role: 12px Inter in sentence case. As tracked uppercase
* mono at 11.2px, a status was the hardest text on the page to read at a glance,
* and a status is read rather than measured, so it is not a mono value. */
.chip {
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding: 0.2rem 0.55rem;
border-radius: var(--radius-pill);
font: 600 var(--type-micro)/1.35 var(--font-ui);
white-space: nowrap;
}
.chip--positive {
background: var(--accent-wash);
color: var(--accent-ink);
}
.chip--warn {
background: var(--warn-soft);
color: var(--warn-ink);
}
.chip--danger {
background: var(--danger-soft);
color: var(--danger);
}
.chip--neutral {
background: var(--surface-2);
color: var(--ink-muted);
}
/* A chip inside a table cell would otherwise push the row's line-height past the
* row padding and make one status-heavy table taller than its neighbours. */
.app-content td > .chip,
.app-content th > .chip {
vertical-align: middle;
}
/* ---------- Numeric cells ----------
* Litres, amounts, and variances are values an operator compares down a column,
* so they sit right-aligned in tabular mono where a transposed digit is visible.
* The header keeps the UI face so the column title still reads as a label. */
.app-content .table .num {
font-family: var(--font-mono);
font-size: var(--type-small);
font-variant-numeric: tabular-nums;
text-align: end;
white-space: nowrap;
}
.app-content .table thead th.num {
font-family: var(--font-ui);
font-size: var(--type-micro);
}
/* Row actions hold two or three 44px buttons. The column shrinks to exactly that and
* never wraps, so a row stays one action-height tall instead of stacking its buttons. */
.app-content .table .table-actions {
width: 1%;
white-space: nowrap;
}
.app-content .table .num .chip {
margin-inline-start: 0.4rem;
}
/* ---------- Evidence checklist ----------
* Each artifact states present or missing in words as well as by icon, so the
* readiness of a discharge never depends on colour alone. */
.evidence-checklist {
display: grid;
gap: 0.35rem;
margin: 0 0 0.85rem;
padding: 0;
list-style: none;
}
.evidence-checklist li {
display: flex;
align-items: center;
gap: 0.5rem;
color: var(--ink-2);
font-size: var(--type-small);
}
.evidence-checklist .mdi {
color: var(--ink-muted);
font-size: var(--type-lead);
}
.evidence-checklist li.is-present .mdi {
color: var(--accent-ink);
}
.evidence-checklist__state {
margin-inline-start: auto;
color: var(--ink-muted);
font: 700 0.7rem/1.35 var(--font-mono);
letter-spacing: 0.06em;
text-transform: uppercase;
}
.evidence-checklist li.is-present .evidence-checklist__state {
color: var(--accent-ink);
}
.evidence-checklist__group {
margin: 0 0 0.4rem;
color: var(--ink);
font-size: var(--type-small);
font-weight: 600;
}
/* ---------- Bootstrap contextual families the app shell never remapped ----------
* The bridge in base.css carries the neutral contract variables, but Bootstrap's
* contextual classes (.btn-success, .btn-warning, .alert-*) set their own literal
* colours and were surviving untouched on three surfaces. The two greens are the
* worst of it: .btn-success was painting Bootstrap's own stock green, a second
* green that breaks the Two Green Rule and reads as a different product. Anything
* a page reaches for that is not one of these has to be added here. */
.app-content .btn-success,
.app-content .btn-success:hover,
.app-content .btn-success:focus {
border-color: transparent;
background: var(--brand);
color: var(--on-brand);
}
.app-content .btn-success:disabled,
.app-content .btn-success.disabled {
border-color: transparent;
background: var(--brand-veil);
color: var(--brand-ink);
}
.app-content .btn-outline-success {
border-color: var(--rule-strong);
background: var(--surface);
color: var(--brand-ink);
}
.app-content .btn-outline-success:hover {
border-color: var(--brand-ink);
background: var(--brand);
color: var(--on-brand);
}
.app-content .btn-warning,
.app-content .btn-warning:hover,
.app-content .btn-warning:focus {
border-color: transparent;
background: var(--warn-soft);
color: var(--warn-ink);
}
.app-content .btn-outline-warning {
border-color: var(--warn);
background: transparent;
color: var(--warn-ink);
}
.app-content .btn-outline-warning:hover {
background: var(--warn-soft);
border-color: var(--warn-ink);
color: var(--warn-ink);
}
.app-content .text-success,
.app-content .text-success * {
color: var(--accent-ink) !important;
}
.app-content .text-warning {
color: var(--warn-ink) !important;
}
.app-content .text-info {
color: var(--ink-2) !important;
}
/* An alert is a callout: a tinted body, a hairline edge in the same hue, and an
* icon rail. Bootstrap's own alert ships a saturated background and a coloured
* left bar, both of which the world has no use for. */
.app-content .alert {
display: flex;
align-items: flex-start;
gap: 0.7rem;
padding: 0.85rem 1rem;
border: 1px solid var(--rule);
border-radius: var(--radius-md);
background: var(--surface-2);
color: var(--ink-2);
font-size: var(--type-body);
}
.app-content .alert > i {
flex: none;
margin-top: 0.1rem;
font-size: var(--type-title);
}
.app-content .alert a {
color: inherit;
font-weight: 600;
text-underline-offset: 0.2em;
}
.app-content .alert-dismissible {
padding-right: 2.5rem;
}
.app-content .alert-danger {
border-color: var(--danger);
background: var(--danger-soft);
color: var(--danger);
}
.app-content .alert-warning {
border-color: var(--warn);
background: var(--warn-soft);
color: var(--warn-ink);
}
.app-content .alert-success {
border-color: var(--accent-ink);
background: var(--accent-wash);
color: var(--accent-ink);
}
.app-content .alert-info {
border-color: var(--rule-strong);
background: var(--surface-2);
color: var(--ink-2);
}
.app-content .nav-tabs {
gap: 0.55rem;
border-bottom: 0;
}
.app-content .nav-tabs .nav-link {
border: 1px solid transparent;
border-radius: var(--radius-sm);
color: var(--ink-2);
background: transparent;
font-size: var(--type-body);
font-weight: 600;
padding: 0.78rem 1rem;
}
.app-content .nav-tabs .nav-link:hover {
border-color: var(--rule);
background: var(--surface);
color: var(--ink);
}
.app-content .nav-tabs .nav-link.active {
border-color: var(--rule-strong);
background: var(--surface);
color: var(--brand-ink);
box-shadow: var(--shadow-sm);
}
.app-content .modal-footer {
border-top: 1px solid var(--rule);
}
.app-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
width: min(calc(100% - 3rem), var(--content-max));
margin: 1.25rem auto 1.5rem;
padding: 1rem 1.2rem;
border-top: 1px solid var(--rule);
background: transparent;
color: var(--ink-muted);
box-shadow: none;
}
[data-theme="dark"] .app-footer {
background: transparent;
border-color: var(--rule);
}
.sidebar-overlay {
position: fixed;
inset: 0;
background: var(--scrim);
opacity: 0;
visibility: hidden;
transition: opacity var(--dur-base), visibility var(--dur-base);
z-index: 999;
}
.sidebar-overlay.show {
opacity: 1;
visibility: visible;
}
@media (max-width: 991px) {
.app-sidebar {
transform: translateX(-100%);
}
.app-sidebar.show {
transform: translateX(0);
}
.app-main {
margin-left: 0;
}
.app-header {
padding: 1rem 1rem 0.9rem;
}
.app-content,
.app-footer {
width: calc(100% - 2rem);
}
/*
* The account destination rail becomes a single horizontally scrollable strip
* once the app rail collapses, matching the moment the app shell goes to one
* column. It scrolls rather than wraps so the six destinations never reflow
* into a tall block that pushes the form off the first screen, and it is a
* native scroll region, so it is keyboard-reachable without a custom handler.
*/
.manage-layout {
grid-template-columns: minmax(0, 1fr);
}
.manage-nav {
position: static;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.manage-nav__list {
display: flex;
gap: 0.25rem;
width: max-content;
min-width: 100%;
}
.manage-nav__list li + li {
margin-top: 0;
}
.manage-nav__link {
white-space: nowrap;
}
.manage-nav__link.active {
box-shadow: inset 0 -3px 0 var(--brand);
}
}
@media (max-width: 767px) {
.page-heading,
.app-content .card-body,
.app-content .card-header,
.app-content .modal-body,
.app-content .modal-header,
.app-content .modal-footer {
padding-left: 1rem;
padding-right: 1rem;
}
.page-heading,
.page-toolbar {
align-items: stretch;
flex-direction: column;
}
.page-heading__actions,
.page-heading__actions .btn,
.page-toolbar__actions,
.page-toolbar__actions .btn {
width: 100%;
}
/*
* .page-heading__actions is a row flex container, so giving each button width:100%
* above asks for 200% of the row plus the gap and pushes the page wider than the
* viewport. Stacking the actions turns that same width:100% into the intended
* full-width column.
*/
.page-heading__actions {
flex-direction: column;
align-items: stretch;
}
/*
* A .row sitting directly inside .app-content carries Bootstrap's negative gutter
* margins, but .app-content provides no matching padding to absorb them, so the row
* hangs a gutter-width past the viewport on a phone.
*/
.app-content > .row {
margin-left: 0;
margin-right: 0;
}
/*
* Some pages reuse .page-heading__actions inside a .card-header.d-flex row, where
* the title and the full-width actions add up to more than the header can hold.
* Letting the header wrap drops the actions onto their own line instead of pushing
* the page wider than the viewport.
*/
.app-content .card-header.d-flex {
flex-wrap: wrap;
row-gap: 0.75rem;
}
.page-toolbar__field {
flex: 1 1 100%;
}
.header-title-row {
flex-wrap: wrap;
}
.header-title-row h1,
.header-title {
font-size: var(--type-subhead);
}
.user-copy {
display: none;
}
}
.swal2-popup.float-alert-modal {
background: var(--surface);
color: var(--ink);
border: 1px solid var(--rule);
border-radius: var(--radius-md);
box-shadow: var(--shadow-lg);
}
.swal2-popup.float-alert-toast {
background: var(--surface);
color: var(--ink);
border: 1px solid var(--rule);
border-radius: var(--radius-sm);
}
@media (prefers-reduced-motion: reduce) {
.swal2-popup,
.swal2-show,
.swal2-hide {
transition: none !important;
animation: none !important;
}
}
|