/* ==========================================================================
PMS — project-wide UI standard for FORMS, TABLES and FILTERS (admin side).
Scope rules (deliberately narrow):
* every selector is anchored to `body.change-form` / `body.change-list`
and to an inner container (#content-main, #changelist, #result_list,
#changelist-filter, #toolbar, .inline-group ...).
* nothing here touches the sidebar (.sidebar-menu), the topbar
(#admin-topbar, #header), the dashboard (body.dashboard), the login
page, breadcrumbs, the footer, the page background or any outer
container / card / panel that already wraps a form, table or filter.
* no bare element selectors (input {}, table {} ...) are used.
Nothing in this file changes markup semantics, names, ids, values,
ordering, permissions or behaviour. Presentation only.
========================================================================== */
body.change-form,
body.change-list {
--pms-accent: #2f6fed;
--pms-accent-soft: #eaf1fd;
--pms-focus-ring: rgba(47, 111, 237, 0.16);
--pms-border: #d7dfe3;
--pms-border-strong: #c3ced4;
--pms-surface: #ffffff;
--pms-surface-soft: #f4f7f8;
--pms-head-bg: #f2f5f6;
--pms-label: #26363d;
--pms-muted: #6b7a82;
--pms-text: #22323a;
--pms-danger: #b3261e;
--pms-row-hover: #f7fafb;
--pms-control-h: 38px;
--pms-radius: 6px;
--pms-gap-x: 24px;
--pms-gap-y: 2px;
}
/* ==========================================================================
1. FORMS — content aware two column grid
========================================================================== */
/* Each admin fieldset becomes a two column grid. Anything that is not a
field row (the heading, .description, an inline table, a nested
inline group, the submit row ...) spans the full width, so section
grouping, field order and business structure are untouched. */
body.change-form #content-main fieldset.module {
column-gap: var(--pms-gap-x);
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-auto-flow: row;
row-gap: var(--pms-gap-y);
}
body.change-form #content-main fieldset.module > *:not(.form-row) {
grid-column: 1 / -1;
min-width: 0;
}
body.change-form #content-main fieldset.module > .form-row {
min-width: 0;
}
/* Width rule: a row holding only dropdowns, numbers, dates or checkboxes
keeps half the line; a row holding free text (text / email / url inputs,
textareas, rich text) takes the whole line. `.pms-row-wide` is added by
pms-ui-standard.js, which classifies every row this way; the :has() rules
below are the no-JS fallback for the same rule. */
body.change-form #content-main fieldset.module > .form-row.pms-row-wide,
body.change-form #content-main fieldset.module > .form-row:has(input[type="text"]):not(:has(input.vTextField)),
body.change-form #content-main fieldset.module > .form-row:has(input[type="email"]),
body.change-form #content-main fieldset.module > .form-row:has(input[type="url"]),
body.change-form #content-main fieldset.module > .form-row:has(input[type="password"]),
body.change-form #content-main fieldset.module > .form-row:has(input[type="search"]),
body.change-form #content-main fieldset.module > .form-row:has(input[type="tel"]),
body.change-form #content-main fieldset.module > .form-row:has(input[type="file"]),
body.change-form #content-main fieldset.module > .form-row:has(textarea),
body.change-form #content-main fieldset.module > .form-row:has(.selector),
body.change-form #content-main fieldset.module > .form-row:has(select[multiple]),
body.change-form #content-main fieldset.module > .form-row:has(.django-ckeditor-widget),
body.change-form #content-main fieldset.module > .form-row:has(.wrapped-fields-container .fieldBox + .fieldBox) {
grid-column: 1 / -1;
}
body.change-form #content-main fieldset.module > .form-row:has(input.vTextField) {
grid-column: span 1;
}
body.change-form #content-main fieldset.module > .form-row:has(input.vTextField) + .form-row:not(:has(input.vTextField)) {
grid-column: 1 / 2;
}
/* Field row shell -------------------------------------------------------- */
body.change-form #content-main fieldset.module > .form-row {
background: transparent;
border-bottom: 0;
display: block;
margin: 0;
overflow: visible;
padding: 9px 2px 11px;
}
body.change-form #content-main fieldset.module > .form-row > div:not(.wrapped-fields-container),
body.change-form #content-main fieldset.module > .form-row > .wrapped-fields-container {
display: block;
margin: 0;
max-width: none;
min-width: 0;
width: 100%;
}
/* Multi field rows (Django `fields: (('a', 'b'),)`) keep their fields side
by side inside the full width row instead of stacking. */
body.change-form #content-main fieldset.module > .form-row > .wrapped-fields-container {
column-gap: var(--pms-gap-x);
display: grid !important;
flex-direction: unset !important;
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
row-gap: 10px;
}
body.change-form #content-main fieldset.module > .form-row > .wrapped-fields-container > .fieldBox {
border-top: 0;
display: block;
margin: 0 !important;
min-width: 0;
padding-top: 0;
width: 100% !important;
}
/* Baton renders some multi-field rows as `.flex-container.form-multiline`
instead of `.wrapped-fields-container` (seen on the proxy apply forms).
Same side-by-side behaviour, different wrapper class Baton emits. */
body.change-form #content-main fieldset.module > .form-row > .flex-container.form-multiline {
column-gap: var(--pms-gap-x);
display: grid !important;
flex-direction: unset !important;
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
row-gap: 10px;
}
body.change-form #content-main fieldset.module > .form-row > .flex-container.form-multiline > div {
min-width: 0;
width: 100%;
}
body.change-form #content-main fieldset.module > .form-row > .flex-container.form-multiline .fieldBox {
border-top: 0;
display: block;
margin: 0 !important;
min-width: 0;
padding-top: 0;
width: 100% !important;
}
/* Labels ----------------------------------------------------------------- */
body.change-form #content-main fieldset.module > .form-row label,
body.change-form #content-main .inline-group .form-row label {
color: var(--pms-label);
display: block;
float: none;
font-size: 13px;
font-weight: 600;
line-height: 1.4;
margin: 0 0 5px;
padding: 0;
text-align: left;
width: auto;
word-break: break-word;
}
body.change-form #content-main fieldset.module > .form-row label.required::after,
body.change-form #content-main .inline-group .form-row label.required::after {
color: var(--pms-danger);
content: " *";
font-weight: 700;
}
/* Checkbox / radio rows read better with the control before the label. */
body.change-form #content-main fieldset.module > .form-row .checkbox-row label,
body.change-form #content-main fieldset.module > .form-row label.vCheckboxLabel {
display: inline-block;
margin: 0 0 0 7px;
vertical-align: middle;
}
body.change-form #content-main fieldset.module > .form-row input[type="checkbox"],
body.change-form #content-main fieldset.module > .form-row input[type="radio"] {
height: 16px;
margin: 0;
min-height: 0;
vertical-align: middle;
width: 16px;
}
/* Controls --------------------------------------------------------------- */
body.change-form #content-main fieldset.module > .form-row input[type="text"],
body.change-form #content-main fieldset.module > .form-row input[type="number"],
body.change-form #content-main fieldset.module > .form-row input[type="email"],
body.change-form #content-main fieldset.module > .form-row input[type="url"],
body.change-form #content-main fieldset.module > .form-row input[type="password"],
body.change-form #content-main fieldset.module > .form-row input[type="tel"],
body.change-form #content-main fieldset.module > .form-row input[type="date"],
body.change-form #content-main fieldset.module > .form-row input[type="time"],
body.change-form #content-main fieldset.module > .form-row input[type="datetime-local"],
body.change-form #content-main fieldset.module > .form-row select,
body.change-form #content-main fieldset.module > .form-row textarea,
body.change-form #content-main fieldset.module > .form-row .select2-container {
box-sizing: border-box;
max-width: 100%;
min-width: 0;
width: 100% !important;
}
body.change-form #content-main .form-row input[type="text"],
body.change-form #content-main .form-row input.vTextField,
body.change-form #content-main .form-row input[type="number"],
body.change-form #content-main .form-row input[type="email"],
body.change-form #content-main .form-row input[type="url"],
body.change-form #content-main .form-row input[type="password"],
body.change-form #content-main .form-row input[type="tel"],
body.change-form #content-main .form-row input[type="date"],
body.change-form #content-main .form-row input[type="time"],
body.change-form #content-main .form-row input[type="datetime-local"],
body.change-form #content-main .form-row select,
body.change-form #content-main .form-row textarea,
body.change-form #content-main .form-row .select2-selection {
background-color: var(--pms-surface);
border: 1px solid var(--pms-border-strong);
border-radius: var(--pms-radius);
box-shadow: none;
color: var(--pms-text);
font-size: 14px;
line-height: 1.45;
min-height: var(--pms-control-h);
padding: 6px 10px;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
body.change-form #content-main .form-row select {
padding-right: 6px;
}
body.change-form #content-main .form-row textarea {
min-height: 92px;
resize: vertical;
}
body.change-form #content-main .form-row input[type="text"],
body.change-form #content-main .form-row input[type="email"],
body.change-form #content-main .form-row input[type="url"],
body.change-form #content-main .form-row input[type="password"],
body.change-form #content-main .form-row input[type="tel"],
body.change-form #content-main .form-row input[type="date"],
body.change-form #content-main .form-row input[type="time"],
body.change-form #content-main .form-row input[type="datetime-local"],
body.change-form #content-main .form-row select,
body.change-form #content-main .form-row .select2-container {
max-width: 100%;
width: 100% !important;
}
body.change-form #content-main .form-row input[type="number"] {
max-width: 66.666667%;
width: 66.666667% !important;
}
body.change-form #content-main .form-row .related-widget-wrapper {
max-width: 100%;
}
body.change-form #content-main .form-row .related-widget-wrapper > input[type="number"] {
max-width: none;
width: auto !important;
}
body.change-form #content-main .form-row input:focus,
body.change-form #content-main .form-row select:focus,
body.change-form #content-main .form-row textarea:focus,
body.change-form #content-main .form-row .select2-container--focus .select2-selection {
border-color: var(--pms-accent);
box-shadow: 0 0 0 3px var(--pms-focus-ring);
outline: 0;
}
/* Disabled / read only --------------------------------------------------- */
body.change-form #content-main .form-row input:disabled,
body.change-form #content-main .form-row select:disabled,
body.change-form #content-main .form-row textarea:disabled,
body.change-form #content-main .form-row input[readonly],
body.change-form #content-main .form-row textarea[readonly] {
background-color: var(--pms-surface-soft);
border-color: var(--pms-border);
color: var(--pms-muted);
cursor: not-allowed;
}
body.change-form #content-main fieldset.module > .form-row .readonly {
background: var(--pms-surface-soft);
border: 1px solid var(--pms-border);
border-radius: var(--pms-radius);
color: var(--pms-text);
display: block;
font-size: 14px;
min-height: var(--pms-control-h);
padding: 8px 10px;
}
/* Select2 sizing so it lines up with native controls. */
body.change-form #content-main .form-row .select2-container .select2-selection--single {
align-items: center;
display: flex;
height: var(--pms-control-h);
}
body.change-form #content-main .form-row .select2-container .select2-selection--single .select2-selection__rendered {
line-height: 1.45;
padding-left: 0;
}
body.change-form #content-main .form-row .select2-container .select2-selection--single .select2-selection__arrow {
height: calc(var(--pms-control-h) - 2px);
}
/* Help text, errors ------------------------------------------------------ */
body.change-form #content-main fieldset.module > .form-row .help,
body.change-form #content-main fieldset.module > .form-row .helptext {
color: var(--pms-muted) !important;
display: block;
font-size: 12px;
line-height: 1.45;
margin: 5px 0 0 !important;
padding: 0 !important;
}
body.change-form #content-main fieldset.module > .form-row .errorlist {
color: var(--pms-danger);
font-size: 12.5px;
font-weight: 600;
list-style: none;
margin: 0 0 5px;
padding: 0;
}
body.change-form #content-main fieldset.module > .form-row.errors,
body.change-form #content-main fieldset.module > .form-row.error {
background: #fdf5f5;
border-radius: var(--pms-radius);
}
body.change-form #content-main fieldset.module > .form-row.errors input,
body.change-form #content-main fieldset.module > .form-row.errors select,
body.change-form #content-main fieldset.module > .form-row.errors textarea,
body.change-form #content-main fieldset.module > .form-row.error input,
body.change-form #content-main fieldset.module > .form-row.error select,
body.change-form #content-main fieldset.module > .form-row.error textarea {
border-color: var(--pms-danger);
}
/* Section headings ------------------------------------------------------- */
body.change-form #content-main fieldset.module > h2 {
font-size: 15px;
font-weight: 700;
letter-spacing: 0.01em;
}
body.change-form #content-main fieldset.module > .description {
color: var(--pms-muted);
font-size: 13px;
line-height: 1.5;
}
/* Related object controls (add / change / delete / view) ------------------
These stay exactly where Django puts them and keep their links and
permissions; they are only aligned and given a consistent size. */
body.change-form #content-main .form-row .related-widget-wrapper {
align-items: center;
display: flex;
flex-wrap: nowrap;
gap: 8px;
min-width: 0;
width: 100%;
}
body.change-form #content-main .form-row .related-widget-wrapper > input,
body.change-form #content-main .form-row .related-widget-wrapper > select,
body.change-form #content-main .form-row .related-widget-wrapper > .select2-container {
flex: 1 1 auto;
min-width: 0;
width: auto !important;
}
/* Django (`select + .related-widget-wrapper-link {margin-left:7px}`) and
Baton (`.add-related {margin-left:15px;margin-right:15px}`,
`.change-related {margin-left:1rem}`) each add their own margins to these
buttons, so the change / delete / add / view controls end up unevenly
spaced. All of those margins are cleared and the single `gap` above sets
the rhythm, so every related-object control is spaced identically on every
form in the project. Baton's `order` is left intact, so the buttons keep
the sequence they have today. */
/* The add / change / delete related-object buttons are hidden on request.
The markup, links and permissions are untouched -- only their display --
so nothing about saving, validation or the related popups changes; the
read-only "view" link, where a model exposes one, is left visible. */
body.change-form #content-main .related-widget-wrapper > a.add-related,
body.change-form #content-main .related-widget-wrapper > a.change-related,
body.change-form #content-main .related-widget-wrapper > a.delete-related,
body.change-form #content-main .related-widget-wrapper > a.add-another {
display: none !important;
}
body.change-form #content-main .form-row .related-widget-wrapper > a,
body.change-form #content-main .form-row .related-widget-wrapper > a.add-related,
body.change-form #content-main .form-row .related-widget-wrapper > a.change-related,
body.change-form #content-main .form-row .related-widget-wrapper > a.delete-related,
body.change-form #content-main .form-row .related-widget-wrapper > a.view-related,
body.change-form #content-main .form-row .related-widget-wrapper > .related-lookup,
body.change-form #content-main .form-row .related-widget-wrapper > .related-widget-wrapper-link {
margin: 0 !important;
}
body.change-form #content-main .form-row .related-widget-wrapper > a,
body.change-form #content-main .form-row .related-widget-wrapper-link {
align-items: center;
box-sizing: border-box;
background: var(--pms-surface-soft);
border: 1px solid var(--pms-border);
border-radius: var(--pms-radius);
display: inline-flex;
flex: 0 0 var(--pms-control-h);
height: var(--pms-control-h);
justify-content: center;
margin: 0;
opacity: 0.85;
transition: background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
width: var(--pms-control-h);
}
body.change-form #content-main .form-row .related-widget-wrapper > a:hover,
body.change-form #content-main .form-row .related-widget-wrapper-link:hover {
background: var(--pms-surface);
border-color: var(--pms-border-strong);
opacity: 1;
}
body.change-form #content-main .form-row .related-widget-wrapper > a img,
body.change-form #content-main .form-row .related-widget-wrapper-link img {
margin: 0;
}
/* Date / time shortcuts stay inline and compact. */
body.change-form #content-main .form-row .datetime .datetimeshortcuts {
align-items: center;
display: inline-flex;
gap: 8px;
margin-left: 8px;
white-space: nowrap;
}
body.change-form #content-main .form-row .datetime .datetimeshortcuts a {
margin: 0 !important;
}
body.change-form #content-main .form-row p.datetime {
align-items: center;
color: var(--pms-muted);
display: flex;
flex-wrap: wrap;
font-size: 13px;
gap: 6px;
margin: 0;
}
/* ==========================================================================
2. INLINE TABLES INSIDE FORMS
========================================================================== */
body.change-form #content-main .inline-group,
body.change-form #content-main .inline-group .tabular,
body.change-form #content-main .inline-group .inline-related {
overflow: visible;
}
body.change-form #content-main .inline-group table {
border-collapse: collapse;
width: 100%;
}
body.change-form #content-main .inline-group table thead th {
background: var(--pms-head-bg);
border-bottom: 1px solid var(--pms-border-strong);
color: var(--pms-label);
font-size: 12.5px;
font-weight: 600;
letter-spacing: 0;
padding: 9px 10px;
text-align: left;
vertical-align: middle;
white-space: nowrap;
}
body.change-form #content-main .inline-group table tbody td,
body.change-form #content-main .inline-group table tbody th {
border-bottom: 1px solid #eef2f4;
padding-bottom: 8px;
padding-left: 10px;
padding-right: 10px;
padding-top: 8px;
vertical-align: middle;
}
/* Django renders str(object) as a caption above every existing tabular
inline row, which Baton positions absolutely and reserves 44px of row
padding for. It only repeats what the row's own cells already show, so
pms-ui-standard.js marks it and it is hidden here; the reserved space is
released with it. Rows keep their normal padding. */
body.change-form #content-main .inline-group table td.original > p.pms-original-empty {
display: none !important;
}
body.change-form #content-main .inline-group table tr.has_original.pms-no-caption > td,
body.change-form #content-main .inline-group table tr.has_original.pms-no-caption > th {
padding-top: 8px;
}
/* When the caption carries functional links (change / view on site) they are
kept: only the duplicated text is dropped, and the links move into the
normal flow of the row's first cell. */
body.change-form #content-main .inline-group table td.original > p.pms-original-links {
align-items: center;
background: none;
border: 0;
display: inline-flex;
gap: 8px;
left: auto;
margin: 0;
padding: 0;
position: static;
top: auto;
white-space: nowrap;
}
body.change-form #content-main .inline-group table tr.has_original.pms-caption-inline > td,
body.change-form #content-main .inline-group table tr.has_original.pms-caption-inline > th {
padding-top: 8px;
}
body.change-form #content-main .inline-group table tbody tr:hover > td {
background: var(--pms-row-hover);
}
body.change-form #content-main .inline-group table td input[type="text"],
body.change-form #content-main .inline-group table td input[type="number"],
body.change-form #content-main .inline-group table td select,
body.change-form #content-main .inline-group table td textarea {
border: 1px solid var(--pms-border-strong);
border-radius: var(--pms-radius);
box-sizing: border-box;
font-size: 13.5px;
max-width: 100%;
min-height: 34px;
padding: 5px 8px;
}
body.change-form #content-main .inline-group table td input:focus,
body.change-form #content-main .inline-group table td select:focus,
body.change-form #content-main .inline-group table td textarea:focus {
border-color: var(--pms-accent);
box-shadow: 0 0 0 3px var(--pms-focus-ring);
outline: 0;
}
body.change-form #content-main .inline-group table td.pms-num,
body.change-form #content-main .inline-group table th.pms-num {
font-variant-numeric: tabular-nums;
text-align: right;
}
/* Stacked inlines follow the same two column grid as the main form. */
body.change-form #content-main .inline-group .inline-related fieldset.module {
column-gap: var(--pms-gap-x);
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
/* ==========================================================================
3. CHANGE LIST TABLES
========================================================================== */
/* Keep every column: let the table itself scroll, never the page shell. */
body.change-list #changelist .results {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
body.change-list #changelist #result_list {
border-collapse: collapse;
font-size: 13.5px;
table-layout: auto;
width: 100%;
}
body.change-list #changelist #result_list thead th,
body.change-list #changelist #result_list thead td {
background: var(--pms-head-bg);
border-bottom: 1px solid var(--pms-border-strong);
border-top: 1px solid var(--pms-border);
color: var(--pms-label);
font-size: 12px;
font-weight: 600;
letter-spacing: 0;
line-height: 1.3;
padding: 8px 9px;
text-align: left;
text-transform: none;
vertical-align: middle;
white-space: normal;
/* `word-break: normal` keeps a column at least as wide as the longest word
in its heading, so Devanagari headings are never split mid-word
(भुक्तानी -> भुक्ता / नी). `overflow-wrap: break-word` still rescues a
single word too long for its column, and unlike `anywhere` it does not
shrink the column's min-content width. */
overflow-wrap: break-word;
word-break: normal;
}
body.change-list #changelist #result_list thead th a,
body.change-list #changelist #result_list thead th a:link,
body.change-list #changelist #result_list thead th a:visited {
color: var(--pms-label);
font-weight: 600;
text-decoration: none;
}
body.change-list #changelist #result_list thead th.sorted {
background: #e9eef0;
}
/* Extra columns must be absorbed by narrowing the wide text columns, not by
scrolling the table. Header and body cells wrap, so the browser's auto
layout gives long text columns the slack and squeezes the short ones, and
`.results` only ever scrolls as a last resort. Numbers, dates and action
links are kept on one line so they are never broken mid-value. */
body.change-list #changelist #result_list tbody td,
body.change-list #changelist #result_list tbody th {
border-bottom: 1px solid #eef2f4;
color: var(--pms-text);
line-height: 1.45;
overflow-wrap: break-word;
padding: 7px 9px;
text-align: left;
vertical-align: middle;
word-break: normal;
}
body.change-list #changelist #result_list td.pms-num,
body.change-list #changelist #result_list th.pms-num,
body.change-list #changelist #result_list td.pms-actions-cell,
body.change-list #changelist #result_list td.pms-nowrap,
body.change-list #changelist #result_list th.pms-nowrap {
overflow-wrap: normal;
white-space: nowrap;
word-break: normal;
}
body.change-list #changelist #result_list tbody tr:hover > td,
body.change-list #changelist #result_list tbody tr:hover > th {
background: var(--pms-row-hover);
}
body.change-list #changelist #result_list tbody tr.selected > td,
body.change-list #changelist #result_list tbody tr.selected > th {
background: var(--pms-accent-soft);
}
body.change-list #changelist #result_list tbody td a,
body.change-list #changelist #result_list tbody th a {
color: var(--pms-accent);
text-decoration: none;
}
body.change-list #changelist #result_list tbody td a:hover,
body.change-list #changelist #result_list tbody th a:hover {
text-decoration: underline;
}
/* Numeric / monetary columns are right aligned. The class is added by
pms-ui-standard.js after inspecting the rendered values only. */
body.change-list #changelist #result_list td.pms-num,
body.change-list #changelist #result_list th.pms-num,
body.change-list #changelist #result_list th.pms-num a {
font-variant-numeric: tabular-nums;
text-align: right;
}
/* Selection column and row action links. */
body.change-list #changelist #result_list td.action-checkbox,
body.change-list #changelist #result_list th.action-checkbox-column {
padding-left: 12px;
padding-right: 6px;
text-align: center;
vertical-align: middle;
width: 34px;
}
body.change-list #changelist #result_list .pms-cell-actions,
body.change-list #changelist #result_list td:has(> a + a) {
white-space: nowrap;
}
body.change-list #changelist #result_list tbody td.pms-actions-cell a {
display: inline-block;
margin-right: 8px;
}
body.change-list #changelist #result_list tbody td.pms-actions-cell a:last-child {
margin-right: 0;
}
/* Empty state. */
body.change-list #changelist .results p.paginator:only-child,
body.change-list #changelist #changelist-form > p:only-of-type {
color: var(--pms-muted);
padding: 18px 4px;
}
/* Bulk actions bar. */
body.change-list #changelist .actions {
align-items: center;
background: var(--pms-surface-soft);
border: 1px solid var(--pms-border);
border-radius: var(--pms-radius);
color: var(--pms-text);
display: flex;
flex-wrap: wrap;
font-size: 13px;
gap: 8px;
padding: 8px 12px;
}
body.change-list #changelist .actions select {
border: 1px solid var(--pms-border-strong);
border-radius: var(--pms-radius);
font-size: 13.5px;
max-width: 100%;
min-height: 34px;
padding: 4px 8px;
}
body.change-list #changelist .actions select:focus {
border-color: var(--pms-accent);
box-shadow: 0 0 0 3px var(--pms-focus-ring);
outline: 0;
}
body.change-list #changelist .actions .action-counter,
body.change-list #changelist .actions .all,
body.change-list #changelist .actions .question,
body.change-list #changelist .actions .clear {
color: var(--pms-muted);
font-size: 12.5px;
}
/* Pagination + result count. */
body.change-list #changelist .paginator {
align-items: center;
border-top: 1px solid var(--pms-border);
color: var(--pms-muted);
display: flex;
flex-wrap: wrap;
font-size: 13px;
gap: 6px;
line-height: 1.6;
padding: 12px 2px 4px;
}
body.change-list #changelist .paginator a,
body.change-list #changelist .paginator .this-page,
body.change-list #changelist .paginator .end {
border: 1px solid var(--pms-border);
border-radius: var(--pms-radius);
color: var(--pms-text);
display: inline-block;
font-weight: 500;
margin: 0;
min-width: 30px;
padding: 5px 9px;
text-align: center;
text-decoration: none;
}
body.change-list #changelist .paginator a:hover {
background: var(--pms-surface-soft);
border-color: var(--pms-border-strong);
}
body.change-list #changelist .paginator .this-page {
background: var(--pms-accent);
border-color: var(--pms-accent);
color: #fff;
}
body.change-list #changelist .paginator .showall {
margin-left: 6px;
}
/* ==========================================================================
4. SEARCH + FILTER CONTROLS
========================================================================== */
/* The change-list search box is laid out by Baton as an input-group (the
submit button is positioned relative to the field). It is deliberately
left alone here: Baton already gives it the same border radius and an
accent focus ring, and imposing our own layout on it displaces the
search button. Only the muted result-count text is normalised. */
body.change-list #changelist #changelist-search .small.quiet {
color: var(--pms-muted);
font-size: 12.5px;
}
/* Every filter control in the project uses one of these shells:
.admin-filter-box/.admin-filter-select (standard_filters.html and the
per-app change_list overrides), .admin-horizontal-filter (filter.html,
plan_filter.html, filter_created_date.html) and
.admin-numeric-filter-wrapper (range / single / slider filters). */
body.change-list #changelist-filter .admin-filter-select,
body.change-list #changelist-filter .admin-horizontal-filter select,
body.change-list #changelist-filter .admin-horizontal-filter input,
body.change-list #changelist-filter .admin-numeric-filter-wrapper input,
body.change-list #changelist-filter .admin-numeric-filter-wrapper select,
body.change-list .report-filters select,
body.change-list .report-filters input {
background-color: var(--pms-surface);
border: 1px solid var(--pms-border-strong);
border-radius: var(--pms-radius);
box-shadow: none;
box-sizing: border-box;
color: var(--pms-text);
font-size: 13.5px;
font-weight: 400;
line-height: 1.45;
min-height: var(--pms-control-h);
padding: 6px 10px;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
width: 100%;
}
body.change-list #changelist-filter .admin-filter-select:focus,
body.change-list #changelist-filter .admin-horizontal-filter select:focus,
body.change-list #changelist-filter .admin-horizontal-filter input:focus,
body.change-list #changelist-filter .admin-numeric-filter-wrapper input:focus,
body.change-list #changelist-filter .admin-numeric-filter-wrapper select:focus,
body.change-list .report-filters select:focus,
body.change-list .report-filters input:focus {
border-color: var(--pms-accent);
box-shadow: 0 0 0 3px var(--pms-focus-ring);
outline: 0;
}
body.change-list #changelist-filter .admin-filter-box,
body.change-list #changelist-filter .admin-horizontal-filter {
align-items: stretch;
flex-direction: column;
gap: 4px;
min-width: 0;
}
body.change-list #changelist-filter .admin-horizontal-filter ul,
body.change-list #changelist-filter .admin-horizontal-filter li {
list-style: none;
margin: 0;
min-width: 0;
padding: 0;
width: 100%;
}
body.change-list #changelist-filter .admin-numeric-filter-wrapper h3,
body.change-list #changelist-filter .admin-horizontal-filter h3 {
color: var(--pms-muted);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.01em;
line-height: 1.35;
margin: 0 0 4px;
padding: 0;
}
body.change-list #changelist-filter .admin-numeric-filter-wrapper p label {
color: var(--pms-muted);
font-size: 12px;
margin: 0 0 3px;
}
body.change-list #changelist-filter .admin-numeric-filter-wrapper button.submit,
body.change-list #changelist-filter .admin-numeric-filter-wrapper button[type="submit"] {
background: transparent;
border: 0;
color: var(--pms-accent);
cursor: pointer;
font-size: 12.5px;
font-weight: 600;
padding: 4px 0 0;
}
/* ==========================================================================
5. RESPONSIVE
========================================================================== */
@media (max-width: 991.98px) {
body.change-form #content-main fieldset.module,
body.change-form #content-main .inline-group .inline-related fieldset.module {
grid-template-columns: minmax(0, 1fr);
}
body.change-form #content-main fieldset.module > .form-row > .wrapped-fields-container,
body.change-form #content-main fieldset.module > .form-row > .flex-container.form-multiline {
grid-template-columns: minmax(0, 1fr);
}
}
/* ==========================================================================
6. PROXY APPLY FORMS
--------------------------------------------------------------------------
Covers every admin form whose Django-generated