@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');

/* ==========================================================================
   MainSys Connect - Django admin theme
   ========================================================================== */

:root {
    /* COLORS */
    --primary: #9ebd3b;
    --dark: #2a292f;
    --grey: #a8abb0;
    --blue100: #00cee3;
    --blue200: #00cee3;
    --dark700: #474d59;
    --grey100: #f0f2f7;

    /* FONTS */
    --main-font: "Manrope", system-ui;

    /* --- derived shades --------------------------------------------- */
    --primary-dark:  #5f7223;

    --link:          #2f4fc0;
    --link-strong:   #223a95;
    --selection-bg:  #e9edf5;

    --action-add:    var(--primary-dark);
    --action-change: var(--link);
    --action-view:   var(--grey600);
    --action-delete: var(--danger);

    --action-tint:       18%;
    --action-tint-hover: 30%;

    --tag-unknown:  #8a5d00;
    --tag-tint:     10%;

    --nav-size:      0.875rem;

    --danger-soft:   #f9ebea;

    --header-glass:  rgba(255, 255, 255, .78);
    --header-muted:  #454a52;
    --danger:        #c0392b;
    --danger-fg:     #ffffff;
    --ghost-bg:      rgba(0, 0, 0, .04);
    --ghost-border:  var(--border);
    --primary-press: #8aa831;
    --primary-soft:  #eef4dc;
    --grey600:       #5d636e;

    --surface:       #ffffff;
    --surface-alt:   #f7f8fb;
    --border:        #dde1ea;
    --border-strong: #c6ccd8;
    --row-divider:   #eceff4;

    --header-h: calc(2.1rem + var(--btn-icon-size) + 1px);

    --radius-sm: 6px;
    --radius:    6px;
    --radius-lg: 14px;
    --shadow-sm: 0 1px 2px rgba(20, 22, 28, .06), 0 1px 3px rgba(20, 22, 28, .04);
    --shadow-md: 0 4px 14px rgba(20, 22, 28, .09);
    --shadow-lg: 0 10px 34px rgba(20, 22, 28, .13);
    --speed:     150ms ease;
    --scrim:     rgba(20, 22, 28, .46);

    /* --- buttons ----------------------------------------------------- */
    /* --- form controls ------------------------------------------------ */
    --control-h:         2.5rem;
    --control-w:         34rem;

    --btn-radius:        var(--radius-sm);
    --btn-pad-y:         0.55rem;
    --btn-pad-x:         1.1rem;
    --btn-pad-y-sm:      0.55rem;
    --btn-pad-x-sm:      1.2rem;
    --btn-pad-y-lg:      0.75rem;
    --btn-pad-x-lg:      1.25rem;
    --btn-font:          0.875rem;
    --btn-font-sm:       0.75rem;
    --btn-font-lg:       0.9375rem;
    --btn-weight:        700;
    --btn-weight-strong: 700;
    --btn-gap:           0.4rem;
    --btn-icon-size:     2rem;
    --btn-danger-fg:     #fff;

    --focus-ring:        var(--primary-dark);
}

/* ==========================================================================
   BASICS
   ========================================================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scrollbar-gutter: stable;
}

/* --------------------------------------------------------------------------
   SCROLLBARS
   -------------------------------------------------------------------------- */
:root {
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong) transparent;
}

::-webkit-scrollbar {
    width: 0.75rem;
    height: 0.75rem;
}

::-webkit-scrollbar-track,
::-webkit-scrollbar-corner {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: var(--border-strong);
    background-clip: content-box;
    border: 3px solid transparent;
    border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--grey600);
}

body {
    font-family: var(--main-font), system-ui;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--body-fg);
    background-color: var(--body-bg);
    background-image: var(--page-wash);
    background-attachment: fixed;
    background-repeat: no-repeat;
    min-height: 100vh;
    margin: unset;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    scroll-behavior: smooth;
}

button {
    cursor: pointer;
    font-family: var(--main-font), system-ui;
}

button:focus-visible,
a:focus-visible,
input[type=submit]:focus-visible,
input[type=button]:focus-visible,
input[type=reset]:focus-visible,
input[type=checkbox]:focus-visible,
input[type=radio]:focus-visible,
input[type=file]:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

@media only screen and (max-width: 1400px) {
    body.no-scroll { overflow: hidden; }
}

/* ==========================================================================
   TOKEN MAPPING
   ========================================================================== */
html[data-theme="light"],
html[data-theme="dark"],
:root {
    --primary: #9ebd3b;
    --primary-fg: var(--dark);
    --secondary: var(--dark);

    --body-fg: var(--dark);
    --body-bg: var(--grey100);
    --body-quiet-color: var(--grey600);
    --body-medium-color: var(--grey600);
    --body-loud-color: var(--dark);

    --header-bg: var(--dark);
    --header-color: var(--grey100);
    --header-link-color: #fff;
    --header-branding-color: var(--body-fg);
    --accent: var(--blue100);

    --breadcrumbs-bg: var(--dark700);
    --breadcrumbs-fg: var(--grey100);
    --breadcrumbs-link-fg: #fff;

    --link-fg: var(--link);
    --link-hover-color: var(--link-strong);
    --link-selected-fg: var(--link-strong);

    --hairline-color: var(--border);
    --border-color: var(--border);

    --button-fg: #fff;
    --button-bg: var(--dark700);
    --button-hover-bg: var(--dark);
    --default-button-bg: var(--primary);
    --default-button-hover-bg: var(--primary-press);
    --close-button-bg: var(--grey600);
    --close-button-hover-bg: var(--dark);
    --delete-button-bg: #c0392b;
    --delete-button-hover-bg: #a33125;

    --object-tools-fg: #fff;
    --object-tools-bg: var(--dark700);
    --object-tools-hover-bg: var(--dark);

    --caption-bg: #fbfcfe;
    --darkened-bg: var(--surface-alt);

    --page-wash:
        radial-gradient(68rem 40rem at 6% -14%,  rgba(158, 189, 59, .03), transparent 58%),
        radial-gradient(66rem 44rem at 102% -4%, rgba(0, 206, 227, .10), transparent 58%),
        radial-gradient(56rem 38rem at 46% 112%, rgba(37, 120, 205, .08), transparent 62%),
        linear-gradient(180deg, #eff5fc 0%, #e9f0f9 42%, #e1eaf5 100%);

    --hero-wash:
        radial-gradient(50rem 38rem at 8% -4%,   rgba(158, 189, 59, .05), rgba(158, 189, 59, 0) 62%),
        radial-gradient(64rem 46rem at 100% 2%,  rgba(0, 206, 227, .15),  rgba(0, 206, 227, 0)  64%),
        radial-gradient(54rem 40rem at 86% 102%, rgba(37, 120, 205, .13), rgba(37, 120, 205, 0) 64%),
        radial-gradient(46rem 34rem at -6% 96%,  rgba(47, 79, 192, .10),  rgba(47, 79, 192, 0)  66%),
        radial-gradient(38rem 30rem at 44% 54%,  rgba(0, 206, 227, .05),  rgba(0, 206, 227, 0)  70%),
        conic-gradient(from 205deg at 58% 38%,
            rgba(0, 206, 227, .05),
            rgba(158, 189, 59, .02) 26%,
            rgba(47, 79, 192, .05)  55%,
            rgba(37, 120, 205, .05) 78%,
            rgba(0, 206, 227, .05)  100%),
        linear-gradient(158deg, #f8fbff 0%, #f2f7fd 46%, #eaf1fa 100%);

    --grid-hue:  #38a1ff;
    --grid-line: color-mix(in srgb, var(--grid-hue) 12%, transparent);
    --grid-size: 20px 30px;
    --grid-fade: radial-gradient(ellipse 70% 60% at 50% 0%, #000 60%, transparent 100%);
    --selected-bg: var(--selection-bg);
    --selected-row: var(--selection-bg);

    --message-success-bg: #eaf5da;
    --message-warning-bg: #fdf3d7;
    --message-error-bg: #fbe6e3;
    --error-fg: #c0392b;

    --font-family-primary: var(--main-font), system-ui, sans-serif;
}

/* ==========================================================================
   LAYOUT
   ========================================================================== */
#container {
    background: transparent;
    height: auto;
    min-height: 100vh;
}

#content {
    padding: 1.75rem 2.5rem 3rem;
}

#content-main {
    min-width: 0;
}

#footer {
    padding: 1rem 2.5rem;
}

h1 {
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--body-fg);
    margin: 0 0 1.4rem;
}

/* --------------------------------------------------------------------------
   PAGE TITLE ICON
   -------------------------------------------------------------------------- */
#content > h1,
.mnss-title-row > h1 {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

#content > h1::before,
.mnss-title-row > h1::before {
    content: "";
    flex: none;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    background-color: var(--surface);
    background-image: var(--page-glyph, url("../admin/img/icon-page-default.svg"));
    background-repeat: no-repeat;
    background-position: center;
    background-size: 1.15rem 1.15rem;
}

body.app-auth       { --page-glyph: url("../admin/img/icon-page-admin.svg"); }
body.app-widget_app { --page-glyph: url("../admin/img/icon-page-widgets.svg"); }

body.model-user             { --page-glyph: url("../admin/img/icon-page-person.svg"); }
body.model-group            { --page-glyph: url("../admin/img/icon-page-group.svg"); }
body.model-bridgewidget     { --page-glyph: url("../admin/img/icon-page-widgets.svg"); }
body.model-customerfeedback { --page-glyph: url("../admin/img/icon-page-reviews.svg"); }

body.dashboard           { --page-glyph: url("../admin/img/icon-page-dashboard.svg"); }
body.delete-confirmation { --page-glyph: url("../admin/img/icon-page-delete.svg"); }

body.mnss-page-history  { --page-glyph: url("../admin/img/icon-page-history.svg"); }
body.mnss-page-password { --page-glyph: url("../admin/img/icon-page-password.svg"); }

#content h2,
.colM h2 {
    font-size: 1rem;
    font-weight: 500;
}

/* ==========================================================================
   HEADER  (pixel sizes preserved from the 62.5% version)
   ========================================================================== */
#header {
    position: sticky;
    top: 0;
    z-index: 30;
    padding: 1.05rem 2.5rem;
    background: var(--surface);
    box-shadow: 0 1px 2px rgba(20, 22, 28, .04), 0 4px 16px rgba(20, 22, 28, .05);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    #header {
        background: var(--header-glass);
        -webkit-backdrop-filter: saturate(175%) blur(14px);
        backdrop-filter: saturate(175%) blur(14px);
    }

    .login #header {
        background: transparent;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}

#header a:link,
#header a:visited {
    color: var(--body-fg);
}

#site-name {
    display: flex;
    align-items: center;
    font-family: var(--main-font), system-ui;
    font-size: 1.1875rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin-inline-end: 1.25rem;
}

#site-name a:link,
#site-name a:visited {
    color: var(--body-fg);
    transition: color var(--speed);
}

#site-name a:hover {
    color: var(--link);
    text-decoration: none;
}

#branding {
    align-items: center;
}

#branding h2 {
    font-size: var(--nav-size);
    color: var(--header-muted);
}

/* --------------------------------------------------------------------------
   HEADER USER TOOLS
   -------------------------------------------------------------------------- */
#user-tools {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 0 0 0 1.25rem;
    float: none;
    font-size: var(--nav-size);
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--header-muted);
}

.mnss-welcome {
    color: var(--header-muted);
    white-space: nowrap;
}

.mnss-welcome strong {
    color: var(--body-fg);
    font-weight: 800;
}

.mnss-userlinks {
    display: flex;
    align-items: center;
    gap: 1.35rem;
}

#user-tools .mnss-userlinks a {
    position: relative;
    display: inline-block;
    padding: 0.15rem 0;
    border: none;
    border-bottom: none;
    background: none;
    border-radius: 0;
    font-family: var(--main-font), system-ui;
    font-size: var(--nav-size);
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--body-fg);
    line-height: 1.3;
    white-space: nowrap;
    transition: color var(--speed);
}

#user-tools .mnss-userlinks a:hover,
#user-tools .mnss-userlinks a:focus-visible {
    color: var(--body-quiet-color);
    text-decoration: none;
}

#user-tools .mnss-userlinks #logout-form {
    display: inline-flex;
    margin: 0;
}

#user-tools .mnss-userlinks #logout-form button {
    background-color: var(--danger-soft);
    color: var(--danger);
    font-weight: 600;
}

#user-tools .mnss-userlinks #logout-form button:hover,
#user-tools .mnss-userlinks #logout-form button:focus-visible {
    background-color: var(--danger);
    border-color: var(--danger);
    border-bottom-color: var(--danger);
    color: var(--danger-fg);
    box-shadow: var(--shadow-sm);
    margin-bottom: 0;
}

#user-tools .mnss-userlinks #logout-form button:active {
    transform: translateY(1px);
}

/* --------------------------------------------------------------------------
   THEME TOGGLE - the icon variant of the button system
   -------------------------------------------------------------------------- */
.theme-toggle {
    --toggle-bg:   #2563eb;
    --toggle-icon: #fbbf24;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--btn-icon-size);
    height: var(--btn-icon-size);
    flex: 0 0 auto;
    margin: 0 0 0 0.15rem;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: var(--toggle-bg);
    cursor: pointer;
    transition: background var(--speed),
                transform 220ms cubic-bezier(.34, 1.56, .64, 1),
                box-shadow var(--speed);
}

html[data-theme="dark"] .theme-toggle {
    --toggle-bg:   #1e40af;
    --toggle-icon: #fde047;
}

html[data-theme="light"] .theme-toggle {
    --toggle-bg:   #bfdbfe;
    --toggle-icon: #c2410c;
}

.theme-toggle:hover {
    background: color-mix(in srgb, var(--toggle-bg) 86%, white);
    transform: rotate(-18deg);
}

.theme-toggle:active {
    transform: rotate(-18deg) scale(.94);
}

.theme-toggle:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

.theme-toggle svg {
    height: 1.125rem;
    width: 1.125rem;
    vertical-align: middle;
}

.theme-toggle svg.theme-icon-when-auto,
.theme-toggle svg.theme-icon-when-dark,
.theme-toggle svg.theme-icon-when-light {
    fill: var(--toggle-icon);
    transition: fill var(--speed);
}

div.breadcrumbs {
    padding: 1.15rem 2.5rem 0;
    font-size: var(--nav-size);
    background: transparent;
    border-bottom: none;
    color: var(--body-fg);
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.4;
}

div.breadcrumbs a:link,
div.breadcrumbs a:visited {
    color: var(--link);
    font-weight: 900;
    padding-bottom: 1px;
    transition: color var(--speed), border-color var(--speed);
}

div.breadcrumbs a:hover,
div.breadcrumbs a:focus-visible {
    color: var(--link-strong);
    text-decoration: none;
}

/* ==========================================================================
   NAV SIDEBAR
   ========================================================================== */
#nav-sidebar {
    align-self: flex-start;
    top: calc(var(--header-h) + 1rem);
    max-height: calc(100vh - var(--header-h) - 2rem);
    margin-block: 1.15rem 2rem;
    padding-block: 0.6rem;
    background: var(--surface);
    border: 0;
    border-start-end-radius: var(--radius);
    border-end-end-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}

[dir="rtl"] #nav-sidebar {
    border: 0;
}

.main > #nav-sidebar + .content,
.main.shifted > #nav-sidebar + .content {
    max-width: 100%;
    min-width: 0;
}

#nav-filter {
    width: calc(100% - 1.5rem);
    margin: 0 0.75rem 0.5rem;
}

#nav-sidebar .module {
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    margin-bottom: 0.85rem;
}

#nav-sidebar .module caption {
    background: transparent;
    padding: 0.875rem 1rem;
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--grey600);
}

#nav-sidebar .module caption a:link,
#nav-sidebar .module caption a:visited {
    color: var(--grey600);
}

#nav-sidebar .current-app .section:link,
#nav-sidebar .current-app .section:visited {
    color: var(--body-fg);
    font-weight: 700;
}

#nav-sidebar .module th,
#nav-sidebar .module td {
    border-bottom: none;
    padding: 0;
}

#nav-sidebar .module:last-child {
    margin-bottom: 0;
}

#nav-sidebar .module td {
    vertical-align: middle;
}

#nav-sidebar .module th a {
    display: block;
    padding: 0.75rem 1rem;
    font-weight: 700;
    font-size: 0.8125rem;
    transition: color var(--speed);
}

#nav-sidebar .module tr {
    background: transparent;
    transition: background-color var(--speed);
}

#nav-sidebar .module tr:hover {
    background-color: var(--selection-bg);
}

#nav-sidebar .module tr:hover th a {
    color: var(--body-fg);
}

#nav-sidebar .module th a:hover {
    text-decoration: none;
}

#nav-sidebar .module td a.addlink:link,
#nav-sidebar .module td a.addlink:visited {
    background-color: transparent;
    font-size: 0.75rem;
    line-height: 1.5rem;
    font-weight: 700;
    color: var(--link);
    margin-right: 1rem;
}

#nav-sidebar .module td a.addlink:hover,
#nav-sidebar .module td a.addlink:focus-visible {
    background-color: transparent;
    color: var(--link-fg);
    text-decoration: none;
}

#nav-sidebar .module tr.current-model {
    background: var(--selection-bg);
    box-shadow: inset 3px 0 0 var(--primary);
}

#nav-sidebar .current-model th a,
#nav-sidebar .current-model th a:link,
#nav-sidebar .current-model th a:visited {
    color: var(--body-fg);
    font-weight: 700;
}

@media (forced-colors: active) {
    #nav-sidebar .module tr.current-model {
        background-color: SelectedItem;
    }
}

#toggle-nav-sidebar {
    display: none;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: var(--btn-icon-size);
    height: var(--btn-icon-size);
    max-height: none;
    margin-inline-end: 0.7rem;
    padding: 0;
    border: unset;
    border-radius: 999px;
    background: var(--ghost-bg);
    color: var(--header-muted);
    cursor: pointer;
    transition: background var(--speed), color var(--speed),
                transform var(--speed);
}

#toggle-nav-sidebar::before {
    content: none;
}

#branding > #toggle-nav-sidebar {
    display: inline-flex;
}

#toggle-nav-sidebar svg {
    width: 1.125rem;
    height: 1.125rem;
    fill: currentColor;
}

#toggle-nav-sidebar .nav-icon-when-open,
body:has(#main.shifted) #toggle-nav-sidebar .nav-icon-when-closed {
    display: none;
}

body:has(#main.shifted) #toggle-nav-sidebar .nav-icon-when-open {
    display: block;
}

#toggle-nav-sidebar:hover,
#toggle-nav-sidebar:focus {
    background: var(--primary-soft);
    color: var(--body-fg);
}

#toggle-nav-sidebar:active {
    transform: scale(.94);
}

#toggle-nav-sidebar:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

/* ==========================================================================
   MODULES / CARDS
   ========================================================================== */
.module {
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    margin-bottom: 1.5rem;
}

.module > h2,
.module caption,
.inline-group h2 {
    background: var(--caption-bg);
    color: var(--body-fg);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.005em;
    text-transform: none;
    padding: 0.85rem 1.1rem 0.8rem;
    border: none;
}

.module caption {
    font-size: 1.125rem;
    font-weight: 600;
    border-bottom: 1px solid var(--row-divider);
}

.module caption a:link,
.module caption a:visited {
    color: var(--body-medium-color);
    font-weight: 600;
}

.module caption a:hover {
    color: var(--link);
    text-decoration: none;
}

.module table {
    width: 100%;
}

.module:not(.calendarbox, .clockbox) table th,
.module:not(.calendarbox, .clockbox) table td {
    padding: 0.7rem 1rem;
    border: none;
    border-bottom: 1px solid var(--row-divider);
    font-size: 0.875rem;
    vertical-align: middle;
}

.module:not(.calendarbox, .clockbox) table tr:last-child th,
.module:not(.calendarbox, .clockbox) table tr:last-child td {
    border-bottom: none;
}

/* --------------------------------------------------------------------------
   TABLE SURFACES
   -------------------------------------------------------------------------- */
.module table,
#content table {
    background: var(--surface);
}

.module tr {
    background: transparent;
}

.module tfoot td,
#content tfoot td {
    background: var(--surface-alt);
}

.module tr .errorlist {
    background: transparent;
}

.module tr.row-form-errors,
.module tr.row-form-errors td {
    background: var(--message-error-bg);
}

.dashboard #content {
    width: auto;
}

.dashboard .module table th {
    width: 100%;
}

.dashboard .module table td {
    white-space: nowrap;
    width: 1%;
}

#content-related {
    background: transparent;
}

#content-related .module {
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    margin-bottom: 1.5rem;
}

#content-related .module h2,
#changelist-filter h2 {
    background: var(--caption-bg);
    color: var(--body-medium-color);
    margin: 0;
    padding: 0.85rem 1.1rem 0.8rem;
    border: none;
    border-bottom: 1px solid var(--row-divider);
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: 0.005em;
    text-transform: none;
}

/* --------------------------------------------------------------------------
   RECENT ACTIONS
   -------------------------------------------------------------------------- */
#content-related h3 {
    color: var(--grey600);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.85rem 1.1rem 0;
    margin: 0 0 0.35rem;
}

#content-related #recent-actions-module p {
    margin: 0.15rem 0.7rem 0.85rem;
    padding: 1rem;
    background: var(--surface-alt);
    border: 1px dashed var(--border);
    border-radius: var(--radius-sm);
    color: var(--grey600);
    font-size: 0.8125rem;
    text-align: center;
}

#content-related .actionlist {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    margin: 0;
    padding: 0.1rem 0.55rem 0.7rem;
}

#content-related .actionlist li {
    --action-color: var(--grey600);
    --action-glyph: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='6' fill='black'/></svg>");
    position: relative;
    margin: 0;
    padding: 0.5rem 0.6rem 0.55rem 2.5rem;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background-image: none;
    font-size: 0.8125rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
    transition: background var(--speed), border-color var(--speed);
}

#content-related .actionlist li:hover {
    background-color: var(--surface-alt);
    border-color: var(--border);
}

#content-related .actionlist li::before,
#content-related .actionlist li::after {
    content: "";
    position: absolute;
    left: 0.6rem;
    top: 0.5rem;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 50%;
}

#content-related .actionlist li::before {
    background-color: var(--ghost-bg);
    background-color: color-mix(in srgb, var(--action-color) var(--action-tint), transparent);
}

#content-related .actionlist li::after {
    background-color: var(--action-color);
    -webkit-mask: var(--action-glyph) center / 0.85rem 0.85rem no-repeat;
    mask: var(--action-glyph) center / 0.85rem 0.85rem no-repeat;
}

#content-related .actionlist li.addlink {
    --action-color: var(--action-add);
    --action-glyph: url("../admin/img/icon-addlink.svg");
}

#content-related .actionlist li.changelink {
    --action-color: var(--action-change);
    --action-glyph: url("../admin/img/icon-changelink.svg");
}

#content-related .actionlist li.deletelink {
    --action-color: var(--action-delete);
    --action-glyph: url("../admin/img/icon-deletelink.svg");
    color: var(--grey600);
    font-weight: 600;
}

#content-related .actionlist li a:link,
#content-related .actionlist li a:visited {
    color: var(--body-fg);
    font-weight: 600;
    text-decoration: none;
}

#content-related .actionlist li a:hover,
#content-related .actionlist li a:focus {
    color: var(--link);
    text-decoration: underline;
    text-underline-offset: 2px;
}

#content-related .actionlist li br {
    display: none;
}

#content-related .actionlist li .mini {
    display: block;
    margin-top: 0.15rem;
    color: var(--grey600);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.045em;
    text-transform: uppercase;
}

ul.actionlist li {
    list-style: none;
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */

/* --- shape: shared by every text button ---------------------------------- */
.button,
a.button,
input[type=submit],
input[type=button],
input[type=reset],
.submit-row input,
.submit-row input.default,
.submit-row a.deletelink,
.submit-row a.closelink,
.delete-confirmation form input[type=submit],
.delete-confirmation form .cancel-link,
#toolbar form input[type=submit],
#changelist .actions .button,
.mnss-filter-toggle,
.object-tools a:link,
.object-tools a:visited,
.paginator a:link,
.paginator a:visited,
#user-tools .mnss-userlinks #logout-form button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--btn-gap);
    height: auto;
    min-height: var(--control-h);
    padding: var(--btn-pad-y) var(--btn-pad-x);
    border: 1px solid transparent;
    border-radius: var(--btn-radius);
    font-family: var(--main-font), system-ui;
    font-size: var(--btn-font);
    font-weight: var(--btn-weight);
    line-height: 1.25;
    letter-spacing: 0;
    text-align: center;
    text-decoration: none;
    text-transform: none;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: none;
    transition: background-color var(--speed), border-color var(--speed),
                color var(--speed), box-shadow var(--speed),
                transform var(--speed);
}

/* --- size: dense rows get the small step, nothing else changes -------- */
#changelist .actions .button,
.paginator a:link,
.paginator a:visited {
    min-height: 0;
    padding: var(--btn-pad-y-sm) var(--btn-pad-x-sm);
    font-size: var(--btn-font-sm);
}

.object-tools a:link,
.object-tools a:visited {
    min-height: var(--control-h);
    padding: var(--btn-pad-y) var(--btn-pad-x-sm);
    font-size: var(--btn-font);
}

#changelist .actions .button {
    min-height: var(--control-h);
    font-size: var(--btn-font);
}

#user-tools .mnss-userlinks #logout-form button {
    padding: var(--btn-pad-y-sm) var(--btn-pad-x-sm);
    min-height: var(--btn-icon-size);
    font-size: var(--nav-size);
}

/* --- colour: neutral, the default fill ----------------------------------- */
.button,
a.button,
input[type=submit],
input[type=button],
input[type=reset],
.submit-row input,
#toolbar form input[type=submit],
#changelist .actions .button,
.mnss-filter-toggle,
.object-tools a:link,
.object-tools a:visited,
.paginator a:link,
.paginator a:visited {
    background-color: var(--button-bg);
    color: var(--button-fg);
}

.button:hover,
a.button:hover,
input[type=submit]:hover,
input[type=button]:hover,
input[type=reset]:hover,
.submit-row input:hover,
#toolbar form input[type=submit]:hover,
#toolbar form input[type=submit]:focus,
#changelist .actions .button:hover,
#changelist .actions .button:focus,
.mnss-filter-toggle:hover,
.mnss-filter-toggle:focus-visible,
.object-tools a:hover,
.object-tools a:focus,
.paginator a:hover,
.paginator a:focus {
    background-color: var(--button-hover-bg);
    color: var(--button-fg);
    box-shadow: var(--shadow-sm);
}

/* --- colour: primary --------------------------------------------------- */
.button.default,
input[type=submit].default,
.submit-row input.default,
.object-tools a.addlink:link,
.object-tools a.addlink:visited,
.login .submit-row input[type=submit] {
    background-color: var(--default-button-bg);
    color: var(--primary-fg);
    font-weight: var(--btn-weight-strong);
    text-transform: none;
}

.button.default:hover,
input[type=submit].default:hover,
.submit-row input.default:hover,
.object-tools a.addlink:hover,
.object-tools a.addlink:focus,
.login .submit-row input[type=submit]:hover {
    background-color: var(--default-button-hover-bg);
    color: var(--primary-fg);
    box-shadow: var(--shadow-sm);
}

/* --- colour: danger ---------------------------------------------------- */
.submit-row a.deletelink,
.delete-confirmation form input[type=submit] {
    background-color: var(--delete-button-bg);
    color: var(--btn-danger-fg);
}

.submit-row a.deletelink:hover,
.submit-row a.deletelink:focus,
.delete-confirmation form input[type=submit]:hover,
.delete-confirmation form input[type=submit]:focus {
    background-color: var(--delete-button-hover-bg);
    color: var(--btn-danger-fg);
    box-shadow: var(--shadow-sm);
}

/* --- colour: ghost, for the dismissive half of a pair ------------------ */
.submit-row a.closelink,
.delete-confirmation form .cancel-link {
    background-color: var(--surface-alt);
    border-color: var(--border-strong);
    color: var(--body-fg);
}

.submit-row a.closelink:hover,
.submit-row a.closelink:focus,
.delete-confirmation form .cancel-link:hover,
.delete-confirmation form .cancel-link:focus {
    background-color: var(--selection-bg);
    border-color: var(--border-strong);
    color: var(--body-fg);
    box-shadow: var(--shadow-sm);
}

/* --- pressed + disabled, shared by every variant ------------------------- */
.button:active,
a.button:active,
input[type=submit]:active,
input[type=button]:active,
input[type=reset]:active,
.submit-row input:active,
.submit-row a.deletelink:active,
.submit-row a.closelink:active,
.delete-confirmation form input[type=submit]:active,
.delete-confirmation form .cancel-link:active,
#toolbar form input[type=submit]:active,
#changelist .actions .button:active,
.mnss-filter-toggle:active,
.object-tools a:active,
.paginator a:active {
    transform: translateY(1px);
}

.button[disabled],
.button.default[disabled],
input[type=submit][disabled],
input[type=submit].default[disabled],
input[type=button][disabled],
input[type=reset][disabled],
.submit-row input[disabled],
.submit-row input.default[disabled],
#changelist .actions .button[disabled] {
    background-color: var(--border-strong);
    border-color: transparent;
    color: var(--surface);
    box-shadow: none;
    transform: none;
    cursor: not-allowed;
    opacity: 1;
}

/* --- the rows the buttons sit in ----------------------------------------- */
.submit-row {
    background: var(--surface);
    border: none;
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 0.85rem 1rem;
    margin: 1.5rem 0 0;
    display: flex;
    gap: 0.6rem;
    align-items: center;
}

.object-tools li {
    height: auto;
}

.mnss-title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem 1.5rem;
    margin-bottom: 1.4rem;
}

.mnss-title-row > h1 {
    margin: 0;
}

.mnss-title-row > .object-tools {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
    float: none;
    position: static;
    margin: 0;
    padding: 0;
}

.mnss-title-row > .object-tools li {
    float: none;
    margin: 0;
}

.mnss-title-row > .object-tools a:link,
.mnss-title-row > .object-tools a:visited {
    float: none;
}

.object-tools a.addlink:link,
.object-tools a.addlink:visited,
.object-tools a.viewsitelink:link,
.object-tools a.viewsitelink:visited {
    padding-right: var(--btn-pad-x-sm);
    background-image: none;
}

.object-tools a.addlink,
.object-tools a.viewsitelink {
    --tool-text-pad: 0.35rem;
    gap: 0;
}

.object-tools a.addlink::before,
.object-tools a.viewsitelink::before {
    content: "";
    flex: 0 0 var(--tool-text-pad);
}

.object-tools a.addlink::after,
.object-tools a.viewsitelink::after {
    content: "";
    flex: 0 0 auto;
    width: 0.8125rem;
    height: 0.8125rem;
    margin-left: var(--tool-text-pad);
    background: var(--tool-glyph) center / contain no-repeat;
}

.object-tools a.addlink {
    --tool-glyph: url("../admin/img/tooltag-add.svg");
}

.object-tools a.viewsitelink {
    --tool-glyph: url("../admin/img/tooltag-arrowright.svg");
}

a.addlink,
a.changelink,
a.viewlink {
    color: var(--link-fg);
    font-weight: 500;
}

.paginator a.showall:link,
.paginator a.showall:visited {
    padding: 0;
    border: none;
    border-radius: 0;
    background-color: transparent;
    box-shadow: none;
    color: var(--link-fg);
    font-weight: 500;
}

.paginator a.showall:hover,
.paginator a.showall:focus {
    background-color: transparent;
    box-shadow: none;
    color: var(--link-hover-color);
}

/* ==========================================================================
   CHANGELIST
   ========================================================================== */
#changelist {
    background: transparent;
    box-shadow: none;
    overflow: visible;
}

#changelist-form {
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

#changelist .results {
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    overflow-x: auto;
}

#result_list {
    width: 100%;
    border-collapse: collapse;
}

#result_list thead th {
    background: var(--surface-alt);
    color: var(--grey600);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    border: none;
    border-bottom: 1px solid var(--row-divider);
    white-space: nowrap;
}

#result_list thead th .text a,
#result_list thead th .text span {
    padding: 0.7rem 1rem;
}

#result_list thead th a {
    color: var(--grey600);
}

#result_list thead th .text,
#result_list thead th .sortoptions {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
}

#result_list thead th.sortable {
    --sort-slot: 33px;
}

#result_list thead th.sortable .text {
    padding-right: 0;
}

#result_list thead th.sortable .text a {
    padding-right: 0.4rem;
}

#result_list thead th.sortable:not(.sorted) .text::after {
    content: "";
    flex: none;
    width: calc(var(--sort-slot) + 1rem);
}

#result_list thead th .sortoptions {
    position: relative;
    box-sizing: content-box;
    width: var(--sort-slot);
    float: none;
    gap: 0.3rem;
    padding: 0 1rem 0 0;
    text-align: left;
}

#result_list thead th.sorted .sortpriority {
    position: absolute;
    top: 50%;
    right: 0.3rem;
    transform: translateY(-50%);
    min-width: 0;
    margin: 0;
    font-size: 0.625rem;
    font-weight: 700;
    line-height: 1;
    vertical-align: baseline;
    color: var(--grey600);
    pointer-events: none;
}

#result_list thead th.sorted a.sortremove {
    visibility: visible;
}

#result_list thead th.sorted .sortoptions a {
    opacity: 0.7;
    transition: opacity var(--speed);
}

#result_list thead th.sorted .sortoptions a:hover,
#result_list thead th.sorted .sortoptions a:focus {
    opacity: 1;
}

#result_list thead th.sorted .sortoptions a.sortremove:hover,
#result_list thead th.sorted .sortoptions a.sortremove:focus {
    background-position: 0 0;
}

#result_list thead th.sorted .sortoptions a.ascending:hover,
#result_list thead th.sorted .sortoptions a.ascending:focus {
    background-position: 0 -28px;
}

#result_list thead th.sorted .sortoptions a.descending:hover,
#result_list thead th.sorted .sortoptions a.descending:focus {
    background-position: 0 -56px;
}

#result_list thead th .text a:hover,
#result_list thead th .text a:focus {
    background: none;
}

#result_list tbody td,
#result_list tbody th {
    padding: 0.7rem 1rem;
    border: none;
    border-bottom: 1px solid var(--row-divider);
    font-size: 0.875rem;
    vertical-align: middle;
}

#result_list tbody tr:last-child td,
#result_list tbody tr:last-child th {
    border-bottom: none;
}

#result_list tbody tr.selected {
    background: var(--selection-bg);
}

#result_list tbody tr.row1,
#result_list tbody tr.row2 {
    background: var(--surface);
}

#toolbar {
    background: var(--surface);
    border: none;
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 0.75rem 1rem;
    margin-bottom: 1.25rem;
}

#changelist-search > div {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
}

#changelist-search .mnss-search-field {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 18rem;
    max-width: 100%;
    min-height: var(--control-h);
    padding-inline: 0.75rem;
    background-color: var(--surface);
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    transition: border-color var(--speed);
}

#changelist-search .mnss-search-field:hover,
#changelist-search .mnss-search-field:focus-within {
    border-color: var(--border-strong);
}

#changelist-search .small.quiet {
    flex: 0 1 auto;
    width: auto;
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--grey600);
    white-space: nowrap;
}

#changelist-search .small.quiet a:link,
#changelist-search .small.quiet a:visited {
    color: var(--link-fg);
    font-weight: 600;
    text-decoration: none;
}

#changelist-search .small.quiet a:hover,
#changelist-search .small.quiet a:focus {
    color: var(--link-hover-color);
    text-decoration: underline;
    text-underline-offset: 2px;
}

#changelist-search .mnss-search-field label {
    display: inline-flex;
    flex: 0 0 auto;
    margin: 0;
    cursor: text;
}

#changelist-search .mnss-search-field img {
    display: block;
    width: 1.125rem;
    height: 1.125rem;
    margin: 0;
}

#toolbar form #searchbar {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    min-height: 0;
    align-self: stretch;
    font-family: var(--main-font), system-ui;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25;
    color: var(--body-fg);
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    margin: 0;
    height: auto;
}

#toolbar form #searchbar:focus,
#toolbar form #searchbar:focus-visible {
    outline: none;
}

#changelist-filter {
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

#changelist-filter #changelist-filter-extra-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0;
    padding: 0.75rem 1.1rem;
    border-bottom: 1px solid var(--row-divider);
    font-size: inherit;
}

#changelist-filter #changelist-filter-extra-actions h3 {
    margin: 0;
    padding: 0;
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: 0;
    text-transform: none;
}

#changelist-filter #changelist-filter-extra-actions a {
    --pill-color: var(--grey600);
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.7rem;
    border: none;
    border-radius: 999px;
    background-color: color-mix(in srgb, var(--pill-color) 12%, transparent);
    background-image: none;
    color: var(--pill-color);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
    transition: background-color var(--speed), color var(--speed);
}

#changelist-filter #changelist-filter-extra-actions a:not(.viewlink):not(.hidelink) {
    --pill-color: var(--danger);
}

#changelist-filter #changelist-filter-extra-actions a.viewlink {
    --extra-glyph: url("../admin/img/icon-viewlink.svg");
}

#changelist-filter #changelist-filter-extra-actions a.hidelink {
    --extra-glyph: url("../admin/img/icon-hidelink.svg");
}

#changelist-filter #changelist-filter-extra-actions a.viewlink::before,
#changelist-filter #changelist-filter-extra-actions a.hidelink::before {
    content: "";
    flex: 0 0 auto;
    width: 0.85rem;
    height: 0.85rem;
    background-color: currentColor;
    -webkit-mask: var(--extra-glyph) center / contain no-repeat;
    mask: var(--extra-glyph) center / contain no-repeat;
}

#changelist-filter #changelist-filter-extra-actions a:hover,
#changelist-filter #changelist-filter-extra-actions a:focus-visible {
    background-color: color-mix(in srgb, var(--pill-color) 20%, transparent);
    color: color-mix(in srgb, var(--pill-color) 78%, var(--body-fg));
}

#changelist-filter #changelist-filter-extra-actions a:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

#changelist-filter details + details {
    border-top: 1px solid var(--row-divider);
}

#changelist-filter details > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin: 0;
    padding: 0.7rem 1.1rem;
    color: var(--body-fg);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
    transition: color var(--speed);
}

#changelist-filter details > summary:hover {
    color: var(--link-fg);
}

#changelist-filter details > summary:hover::after {
    background-color: var(--link-fg);
}

#changelist-filter details > summary:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: -2px;
}

#changelist-filter details > summary::before,
#changelist-filter details[open] > summary::before {
    content: none;
}

#changelist-filter details > summary::after {
    content: "";
    flex: 0 0 auto;
    width: 0.7rem;
    height: 0.7rem;
    background-color: var(--grey600);
    -webkit-mask: url("../admin/img/icon-chevron-down.svg") center / contain no-repeat;
    mask: url("../admin/img/icon-chevron-down.svg") center / contain no-repeat;
    transition: transform var(--speed);
}

#changelist-filter details[open] > summary::after {
    transform: rotate(180deg);
}

#changelist-filter details > ul {
    margin: 0;
    padding: 0 0.6rem 0.6rem;
    border-bottom: none;
}

#changelist-filter details li {
    margin: 0;
    padding: 0;
}

#changelist-filter details li a {
    display: block;
    padding: 0.35rem 0.5rem;
    border-radius: var(--radius-sm);
    color: var(--grey600);
    font-size: 0.8125rem;
    text-decoration: none;
    transition: background-color var(--speed), color var(--speed);
}

#changelist-filter details li a:hover,
#changelist-filter details li a:focus-visible {
    background-color: var(--selection-bg);
    color: var(--body-fg);
}

#changelist-filter details li.selected {
    margin-left: 0;
    padding-left: 0;
    border-left: none;
}

#changelist-filter details li.selected a {
    background-color: var(--selection-bg);
    color: var(--link-fg);
    font-weight: 600;
}

#changelist .paginator,
#change-history .paginator,
.paginator {
    background: transparent;
    border: none;
    border-top: 1px solid var(--row-divider);
    border-radius: 0;
    padding: 0.7rem 1rem;
    font-size: 0.8125rem;
    color: var(--grey600);
}

.paginator .this-page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--btn-pad-y-sm) var(--btn-pad-x-sm);
    border: 1px solid transparent;
    border-radius: var(--btn-radius);
    background: var(--default-button-bg);
    color: var(--primary-fg);
    font-size: var(--btn-font-sm);
    font-weight: var(--btn-weight-strong);
    line-height: 1.25;
    vertical-align: baseline;
}

#changelist .actions,
.actions {
    background: var(--surface-alt);
    border: none;
    border-radius: 0;
    padding: 0.6rem 1rem;
    font-size: 0.8125rem;
    margin-bottom: 0;
}

#changelist-form .results + .actions {
    border-top: 1px solid var(--row-divider);
    border-bottom: none;
}

#changelist-form > .paginator {
    border-top: none;
}

#changelist-form :is(.results, .actions) ~ .paginator {
    border-top: 1px solid var(--row-divider);
}

#changelist .actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.9rem;
}

#changelist .actions label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--grey600);
    white-space: nowrap;
}

#changelist .actions select {
    margin: 0;
}

body #changelist .actions span.action-counter,
body #changelist .actions span.all,
body #changelist .actions span.question,
body #changelist .actions span.clear {
    display: inline-flex;
    align-items: center;
    min-height: var(--control-h);
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--grey600);
    white-space: nowrap;
}

body #changelist .actions .button {
    margin: 0;
}

#changelist .actions span a:link,
#changelist .actions span a:visited {
    color: var(--link-fg);
    font-weight: 600;
    text-decoration: none;
}

#changelist .actions span a:hover,
#changelist .actions span a:focus {
    color: var(--link-hover-color);
    text-decoration: underline;
    text-underline-offset: 2px;
}

#result_list td:has(> img[src*="icon-yes"], > img[src*="icon-no"], > img[src*="icon-unknown"]) {
    --tag-color: var(--grey600);
    --tag-glyph: none;
    --tag-label: "";
    position: relative;
}

#result_list td > img[src*="icon-yes"],
#result_list td > img[src*="icon-no"],
#result_list td > img[src*="icon-unknown"] {
    position: absolute;
    width: 1px;
    height: 1px;
    clip-path: inset(50%);
    overflow: hidden;
}

#result_list td:has(> img[src*="icon-yes"], > img[src*="icon-no"], > img[src*="icon-unknown"])::after {
    content: var(--tag-label);
    display: inline-flex;
    align-items: center;
    min-height: 1.75rem;
    padding: 0 0.85rem 0 2.1rem;
    border-radius: 999px;
    background-color: color-mix(in srgb, var(--tag-color) var(--tag-tint), transparent);
    color: var(--tag-color);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
}

#result_list td:has(> img[src*="icon-yes"], > img[src*="icon-no"], > img[src*="icon-unknown"])::before {
    content: "";
    position: absolute;
    top: 50%;
    left: calc(1rem + 0.6rem);
    width: 1.125rem;
    height: 1.125rem;
    margin-top: -0.5625rem;
    background-color: var(--tag-color);
    -webkit-mask: var(--tag-glyph) center / contain no-repeat;
    mask: var(--tag-glyph) center / contain no-repeat;
    z-index: 1;
}

#result_list td:has(> img[src*="icon-yes"]) {
    --tag-color: var(--action-add);
    --tag-glyph: url("../admin/img/icon-yes.svg");
    --tag-label: "Yes";
}

#result_list td:has(> img[src*="icon-no"]) {
    --tag-color: var(--grey600);
    --tag-glyph: url("../admin/img/icon-no.svg");
    --tag-label: "No";
}

#result_list td:has(> img[src*="icon-unknown"]) {
    --tag-color: var(--tag-unknown);
    --tag-glyph: url("../admin/img/icon-unknown.svg");
    --tag-label: "Unknown";
}

#result_list td.field-is_staff:has(> img[src*="icon-yes"]) {
    --tag-label: "Staff";
}

#result_list td.field-is_staff:has(> img[src*="icon-no"]) {
    --tag-label: "Not staff";
}

#result_list td.field-is_superuser:has(> img[src*="icon-yes"]) {
    --tag-label: "Superuser";
}

#result_list td.field-is_superuser:has(> img[src*="icon-no"]) {
    --tag-label: "Not superuser";
}

#result_list td.field-is_active:has(> img[src*="icon-yes"]) {
    --tag-label: "Active";
}

#result_list td.field-is_active:has(> img[src*="icon-no"]) {
    --tag-label: "Inactive";
}

/* ==========================================================================
   TABLE ACTION BADGES
   ========================================================================== */

/* --- round: the icon-only controls --------------------------------------- */
.related-widget-wrapper-link,
.inline-deletelink {
    --action-color: var(--grey600);
    --action-glyph: none;
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 50%;
    background-color: var(--ghost-bg);
    background-color: color-mix(in srgb, var(--action-color) var(--action-tint), transparent);
    background-image: none;
    overflow: hidden;
    vertical-align: middle;
    transition: background-color var(--speed), border-color var(--speed);
}

.related-widget-wrapper-link[hidden] {
    display: none;
}

.related-widget-wrapper-link::before,
.inline-deletelink::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--action-color);
    -webkit-mask: var(--action-glyph) center / 0.9rem 0.9rem no-repeat;
    mask: var(--action-glyph) center / 0.9rem 0.9rem no-repeat;
}

.related-widget-wrapper-link img {
    width: 0.9rem;
    height: 0.9rem;
    opacity: 0;
}

.related-widget-wrapper-link:hover,
.related-widget-wrapper-link:focus-visible,
.inline-deletelink:hover,
.inline-deletelink:focus-visible {
    background-color: color-mix(in srgb, var(--action-color) var(--action-tint-hover), transparent);
    border-color: color-mix(in srgb, var(--action-color) 45%, transparent);
}

.related-widget-wrapper {
    gap: 0 0.3rem;
    align-items: center;
}

/* --- pill: the labelled controls --------------------------------------- */
.inline-group a.addlink,
.inline-group a.changelink,
.inline-group a.inlinechangelink,
.inline-group a.viewlink,
.inline-group a.inlineviewlink,
.inline-group a.deletelink,
#result_list a.addlink,
#result_list a.changelink,
#result_list a.inlinechangelink,
#result_list a.viewlink,
#result_list a.inlineviewlink,
#result_list a.deletelink,
#content-main .module table a.addlink,
#content-main .module table a.changelink,
#content-main .module table a.inlinechangelink,
#content-main .module table a.viewlink,
#content-main .module table a.inlineviewlink,
#content-main .module table a.deletelink,
#nav-sidebar .module td a.addlink {
    --action-color: var(--grey600);
    --action-glyph: none;
    position: relative;
    display: inline-block;
    padding-left: 1.85rem;
    background-image: none;
    color: var(--link-fg);
    font-weight: 500;
    text-decoration: none;
}

.inline-group a.addlink::before,
.inline-group a.changelink::before,
.inline-group a.inlinechangelink::before,
.inline-group a.viewlink::before,
.inline-group a.inlineviewlink::before,
.inline-group a.deletelink::before,
#result_list a.addlink::before,
#result_list a.changelink::before,
#result_list a.inlinechangelink::before,
#result_list a.viewlink::before,
#result_list a.inlineviewlink::before,
#result_list a.deletelink::before,
#content-main .module table a.addlink::before,
#content-main .module table a.changelink::before,
#content-main .module table a.inlinechangelink::before,
#content-main .module table a.viewlink::before,
#content-main .module table a.inlineviewlink::before,
#content-main .module table a.deletelink::before,
#nav-sidebar .module td a.addlink::before,
.inline-group a.addlink::after,
.inline-group a.changelink::after,
.inline-group a.inlinechangelink::after,
.inline-group a.viewlink::after,
.inline-group a.inlineviewlink::after,
.inline-group a.deletelink::after,
#result_list a.addlink::after,
#result_list a.changelink::after,
#result_list a.inlinechangelink::after,
#result_list a.viewlink::after,
#result_list a.inlineviewlink::after,
#result_list a.deletelink::after,
#content-main .module table a.addlink::after,
#content-main .module table a.changelink::after,
#content-main .module table a.inlinechangelink::after,
#content-main .module table a.viewlink::after,
#content-main .module table a.inlineviewlink::after,
#content-main .module table a.deletelink::after,
#nav-sidebar .module td a.addlink::after {
    content: "";
    position: absolute;
    left: 0.2rem;
    top: 50%;
    width: 1.3rem;
    height: 1.3rem;
    margin-top: -0.65rem;
    border-radius: 50%;
}

.inline-group a.addlink::before,
.inline-group a.changelink::before,
.inline-group a.inlinechangelink::before,
.inline-group a.viewlink::before,
.inline-group a.inlineviewlink::before,
.inline-group a.deletelink::before,
#result_list a.addlink::before,
#result_list a.changelink::before,
#result_list a.inlinechangelink::before,
#result_list a.viewlink::before,
#result_list a.inlineviewlink::before,
#result_list a.deletelink::before,
#content-main .module table a.addlink::before,
#content-main .module table a.changelink::before,
#content-main .module table a.inlinechangelink::before,
#content-main .module table a.viewlink::before,
#content-main .module table a.inlineviewlink::before,
#content-main .module table a.deletelink::before,
#nav-sidebar .module td a.addlink::before {
    background-color: var(--ghost-bg);
    background-color: color-mix(in srgb, var(--action-color) var(--action-tint), transparent);
    transition: background-color var(--speed);
}

.inline-group a.addlink::after,
.inline-group a.changelink::after,
.inline-group a.inlinechangelink::after,
.inline-group a.viewlink::after,
.inline-group a.inlineviewlink::after,
.inline-group a.deletelink::after,
#result_list a.addlink::after,
#result_list a.changelink::after,
#result_list a.inlinechangelink::after,
#result_list a.viewlink::after,
#result_list a.inlineviewlink::after,
#result_list a.deletelink::after,
#content-main .module table a.addlink::after,
#content-main .module table a.changelink::after,
#content-main .module table a.inlinechangelink::after,
#content-main .module table a.viewlink::after,
#content-main .module table a.inlineviewlink::after,
#content-main .module table a.deletelink::after,
#nav-sidebar .module td a.addlink::after {
    background-color: var(--action-color);
    -webkit-mask: var(--action-glyph) center / 0.8rem 0.8rem no-repeat;
    mask: var(--action-glyph) center / 0.8rem 0.8rem no-repeat;
}

.inline-group a.addlink:hover::before,
.inline-group a.changelink:hover::before,
.inline-group a.inlinechangelink:hover::before,
.inline-group a.viewlink:hover::before,
.inline-group a.inlineviewlink:hover::before,
.inline-group a.deletelink:hover::before,
#result_list a.addlink:hover::before,
#result_list a.changelink:hover::before,
#result_list a.inlinechangelink:hover::before,
#result_list a.viewlink:hover::before,
#result_list a.inlineviewlink:hover::before,
#result_list a.deletelink:hover::before,
#content-main .module table a.addlink:hover::before,
#content-main .module table a.changelink:hover::before,
#content-main .module table a.inlinechangelink:hover::before,
#content-main .module table a.viewlink:hover::before,
#content-main .module table a.inlineviewlink:hover::before,
#content-main .module table a.deletelink:hover::before,
#nav-sidebar .module td a.addlink:hover::before {
    background-color: color-mix(in srgb, var(--action-color) var(--action-tint-hover), transparent);
}

/* --- one colour and one glyph per action --------------------------------- */
.related-widget-wrapper-link.add-related,
.inline-group a.addlink,
#result_list a.addlink,
#content-main .module table a.addlink,
#nav-sidebar .module td a.addlink {
    --action-color: var(--action-add);
    --action-glyph: url("../admin/img/icon-addlink.svg");
}

.related-widget-wrapper-link.change-related,
.inline-group a.changelink,
.inline-group a.inlinechangelink,
#result_list a.changelink,
#result_list a.inlinechangelink,
#content-main .module table a.changelink,
#content-main .module table a.inlinechangelink {
    --action-color: var(--action-change);
    --action-glyph: url("../admin/img/icon-changelink.svg");
}

.related-widget-wrapper-link.view-related,
.inline-group a.viewlink,
.inline-group a.inlineviewlink,
#result_list a.viewlink,
#result_list a.inlineviewlink,
#content-main .module table a.viewlink,
#content-main .module table a.inlineviewlink {
    --action-color: var(--action-view);
    --action-glyph: url("../admin/img/icon-viewlink.svg");
}

.related-widget-wrapper-link.add-related::before {
    -webkit-mask-position: calc(50% + 1px) 50%;
    mask-position: calc(50% + 1px) 50%;
}

.related-widget-wrapper-link.delete-related,
.inline-deletelink,
.inline-group a.deletelink,
#result_list a.deletelink,
#content-main .module table a.deletelink {
    --action-color: var(--action-delete);
    --action-glyph: url("../admin/img/icon-deletelink.svg");
}

#content-main .module table th a,
#content-main .module table td a.addlink,
#content-main .module table td a.changelink,
#content-main .module table td a.viewlink {
    font-weight: 700;
}

/* ==========================================================================
   FORMS
   ========================================================================== */
fieldset.module {
    padding: 0;
    border: none;
}

.form-row {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--row-divider);
}

.form-row:last-child {
    border-bottom: none;
}

.aligned .form-row .flex-container:not(.checkbox-row) {
    flex-direction: column;
    align-items: stretch;
    gap: 0.3rem;
}

.aligned label {
    display: block;
    width: auto;
    min-width: 0;
    padding: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--link-strong);
}

.aligned label.required,
.aligned .required label {
    font-weight: 700;
}

.aligned .form-row ul {
    margin-left: 0;
}

body form .aligned .form-row p.help,
body form .aligned .form-row div.help,
body form .aligned .form-row ul.helptext {
    margin: 0.4rem 0 0;
    padding: 0;
    border: none;
}

form .aligned .form-row .help ul {
    margin: 0;
    padding-left: 1rem;
    list-style: disc;
}

form .aligned .form-row .help li {
    margin: 0;
    padding: 0;
    font-size: inherit;
    list-style: disc outside;
}

form .aligned .form-row .help li + li {
    margin-top: 0.15rem;
}

/* --------------------------------------------------------------------------
   FORM CONTROLS
   -------------------------------------------------------------------------- */
input:not([type]),
input[type=text],
input[type=password],
input[type=email],
input[type=url],
input[type=number],
input[type=tel],
input[type=search],
input[type=date],
input[type=time],
input[type=datetime-local],
input[type=month],
input[type=week],
textarea,
select,
.vTextField,
.vUUIDField,
#nav-filter,
#changelist .actions select,
.login .form-row #id_username,
.login .form-row #id_password {
    font-family: var(--main-font), system-ui;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25;
    color: var(--body-fg);
    background-color: var(--surface);
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.5rem 1rem;
    height: auto;
    min-height: var(--control-h);
    transition: border-color var(--speed);
}

:is(
    input:not([type]),
    input[type=text],
    input[type=password],
    input[type=email],
    input[type=url],
    input[type=number],
    input[type=tel],
    input[type=search],
    input[type=date],
    input[type=time],
    input[type=datetime-local],
    input[type=month],
    input[type=week],
    textarea,
    select,
    .vTextField,
    .vUUIDField,
    #nav-filter,
    #changelist .actions select,
    .login .form-row #id_username,
    .login .form-row #id_password
):is(:hover, :focus) {
    border-color: var(--border-strong);
    outline: none;
}

.aligned .form-row input:not(
    [type=checkbox], [type=radio], [type=file], [type=submit],
    .vDateField, .vTimeField, .vIntegerField, .vSmallIntegerField,
    .vBigIntegerField, .vForeignKeyRawIdAdminField),
.aligned .form-row select,
.aligned .form-row textarea,
.colM .aligned .vLargeTextField,
.colMS .aligned .vLargeTextField,
.colM fieldset.wide .vLargeTextField {
    width: 100%;
    max-width: var(--control-w);
}

textarea {
    line-height: 1.55;
}

body.model-bridgewidget textarea,
body.model-customerfeedback textarea {
    resize: none;
}

select:not([multiple]),
#changelist .actions select {
    height: var(--control-h);
}

select:not([multiple]),
body #changelist .actions select {
    -webkit-appearance: none;
    appearance: none;
    padding-right: 2.25rem;
    background-image: url("../admin/img/icon-chevron-down.svg");
    background-repeat: no-repeat;
    background-position: right 0.9rem center;
    background-size: 0.75rem 0.75rem;
    cursor: pointer;
}

select[multiple] {
    min-height: 150px;
}

/* --------------------------------------------------------------------------
   THE DROPDOWN ITSELF
   -------------------------------------------------------------------------- */
@supports (appearance: base-select) {
    select:not([multiple]),
    body #changelist .actions select {
        appearance: base-select;
        background-image: none;
        padding-right: 1rem;
        gap: 0.75rem;
        align-items: center;
        min-width: 12rem;
    }

    select:not([multiple])::picker-icon {
        width: 0.75rem;
        height: 0.75rem;
        color: transparent;
        background: url("../admin/img/icon-chevron-down.svg") center / contain
            no-repeat;
        transition: transform var(--speed);
    }

    select:not([multiple]):open::picker-icon {
        transform: rotate(180deg);
    }

    select:not([multiple])::picker(select) {
        appearance: base-select;
        min-width: anchor-size(width);
        max-height: 18rem;
        margin-top: 0.35rem;
        padding: 0.35rem;
        border: none;
        border-radius: var(--radius);
        background: var(--surface);
        box-shadow: var(--shadow-md);
        overflow-y: auto;
        opacity: 0;
        transition: opacity var(--speed), overlay var(--speed) allow-discrete,
                    display var(--speed) allow-discrete;
    }

    select:not([multiple]):open::picker(select) {
        opacity: 1;
    }

    @starting-style {
        select:not([multiple]):open::picker(select) {
            opacity: 0;
        }
    }

    select:not([multiple]) option {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        min-height: 2.25rem;
        padding: 0.4rem 0.65rem;
        border-radius: var(--radius-sm);
        background: transparent;
        color: var(--body-fg);
        font-size: 0.875rem;
        cursor: pointer;
    }

    select:not([multiple]) option:hover,
    select:not([multiple]) option:focus {
        background: var(--surface-alt);
    }

    select:not([multiple]) option:checked {
        background: var(--selection-bg);
        font-weight: 600;
    }

    select:not([multiple]) option::checkmark {
        content: "";
        order: 1;
        flex: 0 0 auto;
        width: 0.875rem;
        height: 0.875rem;
        margin-left: auto;
        background-color: currentColor;
        -webkit-mask: url("../admin/img/icon-check.svg") center / contain
            no-repeat;
        mask: url("../admin/img/icon-check.svg") center / contain no-repeat;
    }
}

/* --------------------------------------------------------------------------
   CHECKBOXES AND RADIOS
   -------------------------------------------------------------------------- */
input[type=checkbox],
input[type=radio] {
    -webkit-appearance: none;
    appearance: none;
    flex: 0 0 auto;
    width: 1.25rem;
    height: 1.25rem;
    margin: 0;
    padding: 0;
    vertical-align: middle;
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    background-color: var(--surface);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 0.75rem 0.75rem;
    cursor: pointer;
    transition: border-color var(--speed), background-color var(--speed);
}

input[type=radio] {
    border-radius: 50%;
}

input[type=checkbox]:hover,
input[type=radio]:hover {
    border-color: var(--border-strong);
}

input[type=checkbox]:checked,
input[type=radio]:checked {
    border-color: var(--primary);
    background-color: var(--primary);
}

input[type=checkbox]:checked {
    background-image: url("../admin/img/icon-check.svg");
}

input[type=radio]:checked {
    box-shadow: inset 0 0 0 3px var(--surface);
}

input[type=checkbox]:disabled,
input[type=radio]:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.radiolist label,
.checkbox-row label,
label.vCheckboxLabel,
label:has(> input[type=checkbox]),
label:has(> input[type=radio]) {
    cursor: pointer;
}

label:has(> input:disabled),
.checkbox-row:has(input:disabled) label {
    cursor: not-allowed;
}

.form-row select {
    margin: 0;
}

.form-row :is(p.datetime, p.date, p.time) {
    display: grid;
    grid-template-columns: max-content max-content max-content;
    align-items: center;
    justify-content: start;
    gap: 0.45rem 0.6rem;
    margin: 0;
    color: var(--grey600);
    font-size: 0.75rem;
    font-weight: 500;
}

.form-row :is(p.datetime, p.date, p.time) br {
    display: none;
}

body .form-row :is(.datetime, .date, .time) input.vDateField,
body .form-row :is(.datetime, .date, .time) input.vTimeField {
    width: 9rem;
    margin: 0;
}

.form-row :is(.datetime, .date, .time) > .timezonewarning {
    grid-column: 1 / -1;
    margin: 0;
}

.form-row .datetimeshortcuts {
    display: inline-flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    align-items: center;
    gap: 0.35rem;
    font-size: 0;
    white-space: nowrap;
}

.form-row .datetimeshortcuts a {
    color: var(--link-fg);
    font-size: 0.75rem;
    font-weight: 500;
    text-decoration: none;
}

.form-row .datetimeshortcuts a:hover,
.form-row .datetimeshortcuts a:focus-visible {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.form-row .datetimeshortcuts .date-icon,
.form-row .datetimeshortcuts .clock-icon {
    top: 0;
    width: 1rem;
    height: 1rem;
    background-size: 1rem auto;
}

.form-row .datetimeshortcuts a:hover .date-icon,
.form-row .datetimeshortcuts a:focus .date-icon,
.form-row .datetimeshortcuts a:hover .clock-icon,
.form-row .datetimeshortcuts a:focus .clock-icon {
    background-position: 0 -1rem;
}

.form-row .datetimeshortcuts a:has(> .date-icon),
.form-row .datetimeshortcuts a:has(> .clock-icon) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background-color: var(--ghost-bg);
    transition: background-color var(--speed);
}

.form-row .datetimeshortcuts a:has(> .date-icon):hover,
.form-row .datetimeshortcuts a:has(> .date-icon):focus-visible,
.form-row .datetimeshortcuts a:has(> .clock-icon):hover,
.form-row .datetimeshortcuts a:has(> .clock-icon):focus-visible {
    background-color: color-mix(in srgb, var(--link) var(--action-tint), transparent);
}

.calendarbox,
.clockbox {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-lg);
    color: var(--body-fg);
    font-size: 0.75rem;
}

.calendar caption,
.calendarbox h2,
.clockbox h2 {
    padding: 0.55rem 2rem;
    border-bottom: 1px solid var(--row-divider);
    background: var(--caption-bg);
    color: var(--body-medium-color);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.005em;
    text-transform: none;
}

.calendar table {
    background: transparent;
}

.calendar th {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--row-divider);
    background: var(--surface-alt);
    color: var(--grey600);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.calendar td {
    padding: 1px;
    border: none;
}

.calendar td a,
.timelist a {
    padding: 0.4rem 0;
    border-radius: var(--radius-sm);
    color: var(--body-fg);
    font-weight: 500;
}

.calendar td a:hover,
.calendar td a:focus,
.timelist a:hover,
.timelist a:focus {
    background: var(--selection-bg);
    color: var(--body-fg);
}

.calendar td a:active,
.timelist a:active {
    background: var(--border);
    color: var(--body-fg);
}

.calendar td.today a {
    color: var(--link-fg);
    font-weight: 700;
}

.calendar td.selected a {
    background: var(--button-bg);
    color: var(--button-fg);
}

.calendar td.nonday {
    background: transparent;
}

.calendarbox .calendarnav-previous,
.calendarbox .calendarnav-next {
    top: 0.4rem;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background-color: transparent;
    transition: background-color var(--speed);
}

.calendarbox .calendarnav-previous:hover,
.calendarbox .calendarnav-next:hover,
.calendarbox .calendarnav-previous:focus-visible,
.calendarbox .calendarnav-next:focus-visible {
    background-color: var(--ghost-bg);
}

.calendarbox .calendarnav-previous {
    left: 0.5rem;
    background-position: center 4.5px;
}

.calendarbox .calendarnav-next {
    right: 0.5rem;
    background-position: center -10.5px;
}

.calendar-shortcuts {
    padding: 0.55rem 0;
    border-top: 1px solid var(--row-divider);
    background: var(--surface);
    color: var(--grey600);
    font-size: 0.6875rem;
    line-height: 1.4;
}

.calendar-shortcuts a {
    color: var(--link-fg);
    font-weight: 500;
    text-decoration: none;
}

.calendar-shortcuts a:hover,
.calendar-shortcuts a:focus-visible {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.calendar-cancel {
    padding: 0;
    border-top: 1px solid var(--row-divider);
    background: var(--surface-alt);
    font-size: 0.75rem;
}

.calendar-cancel:hover,
.calendar-cancel:focus-within {
    background: var(--selection-bg);
}

.calendar-cancel a {
    padding: 0.5rem 0;
    color: var(--grey600);
    font-weight: 500;
    text-decoration: none;
}

ul.timelist {
    padding: 0.35rem;
}

.timelist a {
    padding: 0.35rem 0.6rem;
    text-align: left;
}

/* --------------------------------------------------------------------------
   FILTER_HORIZONTAL SELECTOR   (group permissions, and any m2m like it)
   -------------------------------------------------------------------------- */
.selector {
    gap: 0.85rem;
    align-items: stretch;
    max-width: 64rem;
}

.selector-available,
.selector-chosen {
    gap: 0.5rem;
    padding: 0.8rem;
    background: var(--surface-alt);
    border-radius: var(--radius);
}

/* --- pane captions ------------------------------------------------------- */
.selector-available-title,
.selector-chosen-title {
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    color: var(--body-fg);
}

.selector-available-title label,
.selector-chosen-title label {
    width: auto;
    min-width: 0;
    padding: 0;
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    text-transform: none;
    color: var(--body-fg);
}

.selector .helptext {
    margin: 0.15rem 0 0;
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--link-strong);
}

/* --- the pane hint, as an info button ----------------------------------- */
.selector-available-title:has(.mnss-hint),
.selector-chosen-title:has(.mnss-hint) {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.mnss-hint {
    display: inline-flex;
    flex: none;
}

.mnss-hint-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: var(--surface) url("../admin/img/info-svgrepo-com.svg")
        center / 1.1rem no-repeat;
    line-height: 1;
    cursor: help;
    transition: background-color var(--speed);
}

.mnss-hint-toggle:hover,
.mnss-hint-toggle:focus-visible {
    background-color: color-mix(in srgb, var(--link) var(--action-tint),
        var(--surface));
}

.mnss-hint .helptext {
    position: absolute;
    top: calc(100% + 0.4rem);
    inset-inline: 0;
    z-index: 20;
    margin: 0;
    padding: 0.5rem 0.65rem;
    background: var(--surface);
    border: none;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    color: var(--body-fg);
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1.45;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--speed), visibility var(--speed);
}

.mnss-hint:hover .helptext,
.mnss-hint-toggle:focus .helptext,
.mnss-hint-toggle:focus + .helptext {
    opacity: 1;
    visibility: visible;
}

/* --- the filter field: same shell as the changelist search --------------- */
.selector .selector-filter {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    padding-inline: 0.75rem;
    min-height: var(--control-h);
    background-color: var(--surface);
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    transition: border-color var(--speed);
}

.selector .selector-filter:hover,
.selector .selector-filter:focus-within {
    border-color: var(--border-strong);
}

.selector .selector-filter label,
.inline-group .aligned .selector .selector-filter label {
    display: inline-flex;
    flex: 0 0 auto;
    float: none;
    width: 1.125rem;
    height: 1.125rem;
    min-width: 0;
    margin: 0;
    padding: 0;
    cursor: text;
}

.selector .search-label-icon {
    background-size: contain;
}

.selector .selector-filter input {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    padding: 0;
    background: transparent;
    border: none;
    font-size: 0.875rem;
    font-weight: 500;
}

.selector .selector-filter input:hover,
.selector .selector-filter input:focus {
    border: none;
    outline: none;
}

/* --- the two lists ------------------------------------------------------- */
.selector select.filtered,
.selector .selector-chosen--with-filtered select {
    height: 17rem;
    max-width: none;
    min-height: 0;
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    overflow: auto;
}

.selector select.filtered option {
    margin-bottom: 0.3rem;
    padding: 0.55rem 0.7rem;
    border-radius: var(--radius-sm);
    background-color: var(--surface);
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--body-fg);
    white-space: normal;
    overflow-wrap: anywhere;
    cursor: pointer;
}

.selector select.filtered option:last-child {
    margin-bottom: 0;
}

.aligned .selector select.filtered option:checked {
    background-color: var(--selection-bg);
}

/* --- the arrow column ---------------------------------------------------- */
.selector ul.selector-chooser {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-self: center;
    width: auto;
    margin: 0;
    padding: 0;
    background: transparent;
    border-radius: 0;
    transform: none;
}

.selector-chooser li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.selector-add,
.selector-remove {
    position: relative;
    box-sizing: border-box;
    flex: 0 0 auto;
    width: var(--btn-icon-size);
    height: var(--btn-icon-size);
    padding: 0;
    border: none;
    border-radius: 999px;
    background: var(--button-bg);
    box-shadow: none;
    transition: background-color var(--speed);
}

.selector-add::after,
.selector-remove::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--button-fg);
    -webkit-mask: url("../admin/img/tooltag-arrowright.svg") center / 0.95rem
        auto no-repeat;
    mask: url("../admin/img/tooltag-arrowright.svg") center / 0.95rem auto
        no-repeat;
    -webkit-mask-mode: alpha;
    mask-mode: alpha;
}

.selector-remove::after { transform: rotate(180deg); }

:enabled.selector-add:hover,
:enabled.selector-remove:hover,
:enabled.selector-add:focus,
:enabled.selector-remove:focus {
    background-color: var(--button-hover-bg);
}

/* --- choose all / remove all -------------------------------------------- */
.selector-chooseall,
.selector-clearall {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--btn-gap);
    height: auto;
    min-height: 0;
    line-height: 1.25;
    margin: 0.5rem auto 0;
    padding: var(--btn-pad-y-sm) var(--btn-pad-x-sm);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--btn-radius);
    box-shadow: none;
    font-size: var(--btn-font-sm);
    font-weight: var(--btn-weight-strong);
    color: var(--link);
    transition: color var(--speed);
}

.selector-chooseall::after,
.selector-clearall::before {
    content: "";
    flex: none;
    width: 1rem;
    height: 1rem;
    background-color: currentColor;
    -webkit-mask-image: url("../admin/img/selector-icons.svg");
    mask-image: url("../admin/img/selector-icons.svg");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 1rem auto;
    mask-size: 1rem auto;
    -webkit-mask-mode: alpha;
    mask-mode: alpha;
}

.selector-chooseall::after {
    -webkit-mask-position: 0 -10rem;
    mask-position: 0 -10rem;
}

.selector-clearall::before {
    -webkit-mask-position: 0 -8rem;
    mask-position: 0 -8rem;
}

:enabled.selector-chooseall:focus,
:enabled.selector-chooseall:hover,
:enabled.selector-clearall:focus,
:enabled.selector-clearall:hover {
    color: var(--link-strong);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* --- "N selected (click to clear)" -------------------------------------- */
.selector-chosen .list-footer-display {
    margin: 0;
    padding: 0.4rem 0.6rem;
    background: var(--primary-soft);
    border: none;
    border-radius: var(--radius-sm);
    color: var(--body-fg);
    font-size: 0.75rem;
    font-weight: 500;
    text-align: center;
}

.selector-chosen .list-footer-display__clear {
    color: var(--link);
    font-weight: 600;
}

.inline-related .original p,
.inline-group .original p {
    font-size: 0.75rem;
    color: var(--grey600);
    margin: 0;
}

.help,
div.help,
p.help,
.form-row .help {
    font-size: 0.75rem;
    color: var(--grey600);
    line-height: 1.45;
}

body form .aligned .form-row ul.errorlist {
    padding-left: 0;
}

.errorlist,
ul.errorlist {
    font-size: 0.75rem;
    color: var(--error-fg);
    font-weight: 500;
    margin: 0 0 0.4rem;
    padding: 0;
    background: transparent;
    list-style: none;
}

.aligned .form-row.errors {
    display: flex;
    flex-direction: column;
}

.aligned .form-row.errors > .errorlist {
    order: 1;
    margin: 0.45rem 0 0;
}

.aligned .form-row.errors ul.errorlist li {
    position: relative;
    margin: 0;
    padding-inline-start: 1.2rem;
    font-size: 0.75rem;
    line-height: 1.45;
}

.aligned .form-row.errors input:not([type=checkbox], [type=radio], [type=submit]),
.aligned .form-row.errors select,
.aligned .form-row.errors textarea {
    border-color: var(--error-fg);
}

.aligned .form-row.errors ul.errorlist li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 0.16em;
    width: 0.875rem;
    height: 0.875rem;
    background-color: var(--error-fg);
    -webkit-mask: url("../admin/img/icon-no.svg") center / contain no-repeat;
    mask: url("../admin/img/icon-no.svg") center / contain no-repeat;
    -webkit-mask-mode: alpha;
    mask-mode: alpha;
}

fieldset .fieldset-heading,
fieldset .inline-heading,
:not(.inline-related) .collapse summary {
    background: var(--caption-bg);
    color: var(--body-fg);
    border: none;
    border-bottom: 1px solid var(--border);
    padding: 0.85rem 1.1rem 0.8rem;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.005em;
    text-transform: none;
}

.inline-group {
    border-radius: var(--radius);
    overflow: hidden;
}

.inline-related.tabular table {
    width: auto;
    min-width: 100%;
}

.mnss-inline-scroll {
    overflow-x: auto;
    overscroll-behavior-x: contain;
}

.inline-related.tabular tbody td {
    vertical-align: top;
}

.inline-group .tabular tr td.original {
    position: relative;
}

.inline-group .tabular td.original p {
    top: 0.55rem;
    left: 1rem;
    height: auto;
    padding: 0;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--grey600);
    white-space: nowrap;
}

.inline-related.tabular td textarea {
    height: 7.5rem;
}

body .inline-group .tabular tr.add-row td {
    padding: 0;
}

#content-main .inline-group .tabular tr.add-row td a {
    display: block;
    padding: 0.8rem 1rem 0.8rem 2.6rem;
}

#content-main .inline-group .tabular tr.add-row td a::before,
#content-main .inline-group .tabular tr.add-row td a::after {
    left: 1rem;
}

.inline-related h3 {
    background: var(--surface-alt);
    color: var(--grey600);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    text-transform: none;
    padding: 0.6rem 1.1rem;
    border-bottom: 1px solid var(--border);
}

/* ==========================================================================
   DELETE CONFIRMATION
   ========================================================================== */
.delete-confirmation #content > p {
    color: var(--link-strong);
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.5;
    margin: 0 0 1.5rem;
}

.delete-confirmation #content > h2 {
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--grey600);
    margin: 0 0 0.5rem;
}

.delete-confirmation #content > ul,
.delete-confirmation #content > form > div {
    background: var(--surface);
    border: none;
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    margin: 0 0 1.5rem;
}

.delete-confirmation #content > form > div {
    padding: 0.85rem 1rem;
    display: flex;
    gap: 0.6rem;
    align-items: center;
    margin-bottom: 0;
}

/* --- summary: one row per model, count in a pill ------------------------- */
ul.mnss-delete-summary {
    list-style: none;
    padding: 0.35rem 0.5rem;
}

ul.mnss-delete-summary > li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    list-style: none;
    padding: 0.45rem 0.6rem;
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    line-height: 1.4;
}

ul.mnss-delete-summary > li + li {
    box-shadow: 0 -1px 0 var(--row-divider);
}

.mnss-summary-count {
    flex: none;
    min-width: 1.75rem;
    padding: 0.05rem 0.45rem;
    border-radius: 999px;
    background: var(--surface-alt);
    color: var(--grey600);
    font-size: 0.8125rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

/* --- object trees: markers and an indent guide instead of bullets -------- */
.delete-confirmation #content > ul:not(.mnss-delete-summary) {
    padding: 0.9rem 1.2rem;
    font-size: 0.875rem;
}

.delete-confirmation #content > ul:not(.mnss-delete-summary) li {
    position: relative;
    list-style: none;
    padding: 0.1rem 0 0.1rem 1rem;
    font-size: 0.875rem;
    line-height: 1.55;
}

.delete-confirmation #content > ul:not(.mnss-delete-summary) li::before {
    content: "";
    position: absolute;
    left: 0.05rem;
    top: 0.75em;
    width: 0.3rem;
    height: 0.3rem;
    border-radius: 50%;
    background: var(--border-strong);
}

.delete-confirmation #content > ul:not(.mnss-delete-summary) li > ul {
    margin: 0.15rem 0 0.3rem;
    padding-left: 0.95rem;
    border-left: 1px solid var(--row-divider);
}

.delete-confirmation #content > ul:not(.mnss-delete-summary) > li {
    font-weight: 500;
}

.delete-confirmation #content > ul:not(.mnss-delete-summary) > li ul {
    font-weight: 400;
}

/* ==========================================================================
   MESSAGES
   ========================================================================== */
ul.messagelist {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0;
    margin: 1.5rem 2.5rem 0;
}

ul.messagelist li {
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.45;
    border: none;
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 0.8rem 1.1rem 0.8rem 2.6rem;
    color: var(--body-fg);
}

.login ul.messagelist {
    margin: 1.5rem 2.25rem 0;
}

.errornote {
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.45;
    color: var(--body-fg);
    background-color: var(--message-error-bg);
    border: none;
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 0.8rem 1.1rem 0.8rem 2.6rem;
    margin: 0 0 1.25rem;
}

/* ==========================================================================
   LOGIN
   ========================================================================== */
body.login {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    min-height: 100dvh;
    background-image: var(--hero-wash);
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: .4;
    background-image:
        linear-gradient(to right,  var(--grid-line) 1px, transparent 1px),
        linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
    background-size: var(--grid-size);
    -webkit-mask-image: var(--grid-fade);
    mask-image: var(--grid-fade);
}

.login #container {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding-block: 1.5rem;
    width: 29rem;
    max-width: calc(100vw - 2rem);
    margin: 0;
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
    position: relative;
    z-index: 1;
}

.login #header {
    position: static;
    background: transparent;
    border-bottom: none;
    padding: 0 0 1.15rem;
    justify-content: center;
    box-shadow: none;
}

.login #branding {
    flex: 1 1 auto;
    justify-content: center;
}

.login #site-name {
    margin-inline-end: 0;
    font-size: 1.375rem;
}

.login #main {
    background: color-mix(in srgb, var(--surface) 86%, transparent);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
    backdrop-filter: blur(16px) saturate(1.4);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.login #content {
    padding: 0;
}

.login #content-main {
    padding: 1.75rem 2.25rem;
}

.login #content > .errornote {
    margin: 1.5rem 2.25rem 0;
}

.login #footer {
    display: none;
}

.login .form-row {
    padding: 0 0 0.9rem;
    border-bottom: none;
}

.login .form-row label {
    display: block;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--link-strong);
    margin-bottom: 0.35rem;
}

.login .form-row #id_username,
.login .form-row #id_password {
    width: 100%;
}

.login .submit-row {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0.5rem 0 0;
    margin: 0;
}

.login .submit-row input[type=submit] {
    width: 100%;
    padding-inline: var(--btn-pad-x-lg);
    font-size: var(--btn-font-lg);
}

.login .password-reset-link {
    text-align: center;
    font-size: 0.8125rem;
}

.login #content > h1 {
    justify-content: center;
    margin: 0;
    padding: 1.3rem 1.75rem;
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    border-bottom: 1px solid var(--border);
}

.login #content > h1::before {
    content: none;
}

.login .password-field {
    position: relative;
}

.login .form-row .password-field #id_password {
    padding-right: 3rem;
}

.login .password-toggle {
    position: absolute;
    top: 50%;
    right: 0.4rem;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    padding: 0;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--grey600);
    cursor: pointer;
    transition: color var(--speed), background-color var(--speed);
}

.login .password-toggle:hover {
    color: var(--link-strong);
    background-color: var(--surface-alt);
}

.login .password-toggle:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 1px;
}

.login .password-toggle svg {
    width: 1.15rem;
    height: 1.15rem;
    display: block;
    fill: currentColor;
}

.login .password-toggle svg:nth-of-type(2),
.login .password-toggle[aria-pressed="true"] svg:nth-of-type(1) {
    display: none;
}

.login .password-toggle[aria-pressed="true"] svg:nth-of-type(2) {
    display: block;
}

/* ==========================================================================
   ICONS
   ========================================================================== */

table thead th.sorted .sortoptions a.sortremove:after {
    content: none;
}

ul.messagelist li,
ul.messagelist li.warning,
ul.messagelist li.error,
.errornote {
    background-position: 0.95rem 0.9rem;
    background-size: 1rem auto;
    background-repeat: no-repeat;
}

.errornote {
    background-image: url("../admin/img/icon-no.svg");
}

/* ==========================================================================
   DARK MODE
   ========================================================================== */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --surface:       #24262c;
        --surface-alt:   #2c2f36;
        --border:        #383b44;
        --border-strong: #474b56;
        --row-divider:   #30333b;
        --primary-soft:  #333a24;
        --grey600:       #9ca3af;

        --body-bg:   #1a1b20;
        --body-fg:   #e8eaf0;
        --body-quiet-color: #9ca3af;
        --body-loud-color:  #ffffff;

        --link-fg: var(--link);
        --link-hover-color: var(--link-strong);
        --link-selected-fg: var(--link-strong);

        --breadcrumbs-bg: #24262c;
        --breadcrumbs-fg: #c9cdd6;
        --breadcrumbs-link-fg: #ffffff;

        --button-bg: var(--dark700);
        --button-hover-bg: #5a6270;

        --message-success-bg: #26301c;
        --message-warning-bg: #332c18;
        --message-error-bg:   #3a201d;
        --error-fg: #f2857c;
        --caption-bg: #282a31;
        --danger: #ef7f72;
        --danger-fg: var(--dark);
        --ghost-bg: rgba(255, 255, 255, .07);
        --ghost-border: rgba(255, 255, 255, .18);
        --link: #9fb4ff;
        --link-strong: #c2d0ff;
        --selection-bg: #2e323b;
        --action-add: #a8c94a;
    --tag-unknown: #e2b45c;
        --header-glass: rgba(36, 38, 44, .86);
        --scrim: rgba(0, 0, 0, .62);
        --header-muted: #c8ced7;
        --danger-soft: #382f33;
        --focus-ring:  var(--primary);
        --page-wash:
            radial-gradient(68rem 40rem at 6% -14%,  rgba(158, 189, 59, .03), transparent 58%),
            radial-gradient(66rem 44rem at 102% -4%, rgba(0, 206, 227, .10), transparent 58%),
            radial-gradient(56rem 38rem at 46% 112%, rgba(37, 120, 205, .10), transparent 62%),
            linear-gradient(180deg, #1a2029 0%, #161b23 45%, #11151c 100%);

        --hero-wash:
            radial-gradient(50rem 38rem at 8% -4%,   rgba(158, 189, 59, .03), rgba(158, 189, 59, 0) 62%),
            radial-gradient(64rem 46rem at 100% 2%,  rgba(0, 206, 227, .13),  rgba(0, 206, 227, 0)  64%),
            radial-gradient(54rem 40rem at 86% 102%, rgba(37, 120, 205, .17), rgba(37, 120, 205, 0) 64%),
            radial-gradient(46rem 34rem at -6% 96%,  rgba(93, 118, 255, .12), rgba(93, 118, 255, 0) 66%),
            radial-gradient(38rem 30rem at 44% 54%,  rgba(0, 206, 227, .05),  rgba(0, 206, 227, 0)  70%),
            conic-gradient(from 205deg at 58% 38%,
                rgba(0, 206, 227, .06),
                rgba(158, 189, 59, .02) 26%,
                rgba(93, 118, 255, .05) 55%,
                rgba(37, 120, 205, .06) 78%,
                rgba(0, 206, 227, .06)  100%),
            linear-gradient(158deg, #1a2029 0%, #161b23 46%, #11151c 100%);

        --grid-hue:  #7cc2ff;
        --grid-line: color-mix(in srgb, var(--grid-hue) 10%, transparent);
    }
}

html[data-theme="dark"] {
    --surface:       #24262c;
    --surface-alt:   #2c2f36;
    --border:        #383b44;
    --border-strong: #474b56;
    --row-divider:   #30333b;
    --primary-soft:  #333a24;
    --grey600:       #9ca3af;

    --body-bg:   #1a1b20;
    --body-fg:   #e8eaf0;
    --body-quiet-color: #9ca3af;
    --body-loud-color:  #ffffff;

    --link-fg: var(--link);
    --link-hover-color: var(--link-strong);
    --link-selected-fg: var(--link-strong);

    --breadcrumbs-bg: #24262c;
    --breadcrumbs-fg: #c9cdd6;
    --breadcrumbs-link-fg: #ffffff;

    --button-bg: var(--dark700);
    --button-hover-bg: #5a6270;

    --message-success-bg: #26301c;
    --message-warning-bg: #332c18;
    --message-error-bg:   #3a201d;
    --error-fg: #f2857c;
    --caption-bg: #282a31;
    --danger: #ef7f72;
    --danger-fg: var(--dark);
    --ghost-bg: rgba(255, 255, 255, .07);
    --ghost-border: rgba(255, 255, 255, .18);
    --link: #9fb4ff;
    --link-strong: #c2d0ff;
    --selection-bg: #2e323b;
    --action-add: #a8c94a;
    --tag-unknown: #e2b45c;
    --header-glass: rgba(36, 38, 44, .86);
    --scrim: rgba(0, 0, 0, .62);
    --header-muted: #c8ced7;
    --danger-soft: #382f33;
    --focus-ring:  var(--primary);
    --page-wash:
        radial-gradient(68rem 40rem at 6% -14%,  rgba(158, 189, 59, .03), transparent 58%),
        radial-gradient(66rem 44rem at 102% -4%, rgba(0, 206, 227, .10), transparent 58%),
        radial-gradient(56rem 38rem at 46% 112%, rgba(37, 120, 205, .10), transparent 62%),
        linear-gradient(180deg, #1a2029 0%, #161b23 45%, #11151c 100%);

    --hero-wash:
        radial-gradient(50rem 38rem at 8% -4%,   rgba(158, 189, 59, .03), rgba(158, 189, 59, 0) 62%),
        radial-gradient(64rem 46rem at 100% 2%,  rgba(0, 206, 227, .13),  rgba(0, 206, 227, 0)  64%),
        radial-gradient(54rem 40rem at 86% 102%, rgba(37, 120, 205, .17), rgba(37, 120, 205, 0) 64%),
        radial-gradient(46rem 34rem at -6% 96%,  rgba(93, 118, 255, .12), rgba(93, 118, 255, 0) 66%),
        radial-gradient(38rem 30rem at 44% 54%,  rgba(0, 206, 227, .05),  rgba(0, 206, 227, 0)  70%),
        conic-gradient(from 205deg at 58% 38%,
            rgba(0, 206, 227, .06),
            rgba(158, 189, 59, .02) 26%,
            rgba(93, 118, 255, .05) 55%,
            rgba(37, 120, 205, .06) 78%,
            rgba(0, 206, 227, .06)  100%),
        linear-gradient(158deg, #1a2029 0%, #161b23 46%, #11151c 100%);

    --grid-hue:  #7cc2ff;
    --grid-line: color-mix(in srgb, var(--grid-hue) 10%, transparent);
}

/* ==========================================================================
   RESPONSIVE NAVIGATION
   ========================================================================== */

.mnss-nav-toggle,
.mnss-nav-close {
    display: none;
    align-items: center;
    justify-content: center;
    width: var(--btn-icon-size);
    height: var(--btn-icon-size);
    flex: 0 0 auto;
    padding: 0;
    border: unset;
    border-radius: 999px;
    background: var(--ghost-bg);
    color: var(--header-muted);
    cursor: pointer;
    transition: background var(--speed), border-color var(--speed),
                color var(--speed);
}

.mnss-nav-toggle svg,
.mnss-nav-close svg {
    width: 1.125rem;
    height: 1.125rem;
    fill: currentColor;
}

.mnss-nav-toggle:hover,
.mnss-nav-close:hover,
.mnss-nav-toggle:focus-visible,
.mnss-nav-close:focus-visible {
    background: var(--primary-soft);
    border-color: var(--primary);
    color: var(--body-fg);
}

.mnss-nav-toggle:active,
.mnss-nav-close:active {
    transform: scale(.94);
}

.mnss-nav-head {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.7rem 1rem;
    border-bottom: 1px solid var(--border);
}

.mnss-nav-head-title {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--grey600);
}

.mnss-nav-scrim {
    display: none;
}

#mnss-nav-menu {
    display: none;
}

.mnss-filter-toggle,
.mnss-filter-bar {
    display: none;
}

.mnss-filter-modal {
    width: min(24rem, calc(100vw - 2rem));
    max-height: min(80vh, 44rem);
    margin: auto;
    padding: 0;
    border: none;
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, .28);
    color: var(--body-fg);
    overflow: hidden;
}

.mnss-filter-modal[open] {
    display: flex;
    flex-direction: column;
}

.mnss-filter-modal::backdrop {
    background: var(--scrim);
}

.mnss-filter-modal #changelist-filter {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    width: auto;
    margin: 0;
    border-radius: var(--radius);
    box-shadow: none;
    overflow: hidden;
}

.mnss-filter-modal #changelist-filter h2 {
    flex: 0 0 auto;
}

.mnss-filter-modal .mnss-filter-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.mnss-filter-modal .mnss-filter-close {
    display: inline-flex;
    position: absolute;
    top: 0.6rem;
    right: 0.75rem;
    z-index: 2;
}

.mnss-filter-modal .mnss-filter-close::before {
    content: "";
    width: 1.125rem;
    height: 1.125rem;
    background-color: currentColor;
    -webkit-mask: url("../admin/img/icon-close.svg") center / contain no-repeat;
    mask: url("../admin/img/icon-close.svg") center / contain no-repeat;
}

@media (max-width: 1024px) {
    .mnss-filter-toggle {
        display: inline-flex;
    }

    .mnss-filter-toggle::before {
        content: "";
        flex: 0 0 auto;
        width: 0.9rem;
        height: 0.9rem;
        background-color: currentColor;
        -webkit-mask: url("../admin/img/icon-filter.svg") center / contain no-repeat;
        mask: url("../admin/img/icon-filter.svg") center / contain no-repeat;
    }

    .mnss-filter-toggle-on::after {
        content: "";
        flex: 0 0 auto;
        width: 0.4rem;
        height: 0.4rem;
        border-radius: 50%;
        background-color: var(--primary);
    }

    .mnss-filter-bar {
        display: flex;
        justify-content: flex-end;
        padding: 0.75rem 1rem 0;
    }
}

/* ==========================================================================
   TABLET + MOBILE  (<= 1024px)
   ========================================================================== */
@media (max-width: 1024px) {
    body #header,
    body div.breadcrumbs {
        padding-inline: 1.25rem;
    }
    #content {
        padding: 1.25rem;
    }

    body.login #header {
        padding: 0 0 1.15rem;
    }
    body.login #branding {
        justify-content: center;
    }
    body.login #content {
        padding: 0;
    }
    body.login #content-main {
        padding: 1.5rem;
    }
    body.login #content > h1 {
        padding: 1.1rem 1.5rem;
    }
    body.login #content > .errornote {
        margin: 1.25rem 1.5rem 0;
    }
    .login ul.messagelist {
        margin: 1.25rem 1.5rem 0;
    }

    body.login .form-row label {
        font-size: 0.9375rem;
    }

    body.login .form-row #id_username,
    body.login .form-row #id_password {
        font-size: 1rem;
        min-height: 2.75rem;
    }

    body.login .form-row .password-field #id_password {
        padding-right: 3.5rem;
    }

    body.login .password-toggle {
        width: 2.75rem;
        height: 2.75rem;
        right: 0.1rem;
    }

    body.login .password-toggle svg {
        width: 1.3rem;
        height: 1.3rem;
    }

    body.login .submit-row input[type=submit] {
        min-height: 3rem;
        font-size: 1rem;
    }
    ul.messagelist {
        margin: 1.25rem 1.25rem 0;
    }
    body ul.messagelist li,
    body ul.messagelist li.warning,
    body ul.messagelist li.error {
        padding-left: 2.6rem;
        background-position: 0.95rem 0.9rem;
    }

    /* --- the header row ----------------------------------------------- */
    body.mnss-nav-ready #header {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem 0.75rem;
    }

    #header > #user-tools {
        flex: 1 0 100%;
        margin: 0;
        padding-top: 0.55rem;
        border-top: 1px solid var(--border);
    }

    #branding {
        align-items: center;
        flex: 1 1 auto;
        min-width: 0;
    }

    body.mnss-nav-drawer .mnss-nav-toggle {
        display: inline-flex;
        margin-inline-end: 0.7rem;
    }

    body #site-name {
        margin: 0;
        min-width: 0;
        font-size: 1.0625rem;
    }

    body #site-name a {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    #user-tools {
        flex-wrap: wrap;
        margin: 0;
        gap: 0.6rem 1rem;
    }

    .mnss-userlinks {
        flex-wrap: wrap;
        gap: 0.5rem 1.1rem;
    }

    /* --- the drawer --------------------------------------------------- */
    #branding > #toggle-nav-sidebar {
        display: none;
    }

    #main > #nav-sidebar,
    body.mnss-nav-drawer #mnss-nav-menu {
        display: block;
        position: fixed;
        inset-block: 0;
        inset-inline-start: 0;
        z-index: 60;
        align-self: stretch;
        flex: 0 0 auto;
        width: min(19rem, 84vw);
        max-height: none;
        margin: 0;
        padding: 0 0 env(safe-area-inset-bottom, 0);
        border: 0;
        border-inline-end: 1px solid var(--border);
        border-radius: 0;
        background: var(--surface);
        box-shadow: var(--shadow-lg);
        overflow: auto;
        overscroll-behavior: contain;
        transform: translateX(-100%);
        transition: transform 240ms cubic-bezier(.4, 0, .2, 1);
    }

    [dir="rtl"] #main > #nav-sidebar,
    [dir="rtl"] body.mnss-nav-drawer #mnss-nav-menu {
        transform: translateX(100%);
    }

    body.mnss-nav-open #main > #nav-sidebar,
    body.mnss-nav-open #mnss-nav-menu {
        transform: none;
        visibility: visible;
    }

    body:not(.mnss-nav-open) .main > #nav-sidebar {
        visibility: hidden;
    }

    body:not(.mnss-nav-open) #mnss-nav-menu {
        visibility: hidden;
    }

    .mnss-nav-scrim {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 55;
        background: var(--scrim);
        opacity: 0;
        pointer-events: none;
        transition: opacity 240ms ease;
    }

    body.mnss-nav-open .mnss-nav-scrim {
        opacity: 1;
        pointer-events: auto;
    }

    .mnss-nav-head {
        display: flex;
    }

    .mnss-nav-close {
        display: inline-flex;
    }

    /* --- inside the drawer ----------------------------------------------- */
    #nav-sidebar #nav-filter {
        width: calc(100% - 2rem);
        margin: 0.7rem 1rem 0.4rem;
        font-size: 1rem;
    }

    #nav-sidebar .module th a {
        display: flex;
        align-items: center;
        min-height: 2.5rem;
        padding: 0.5rem 1rem;
        font-size: 0.875rem;
    }

    #nav-sidebar .module td a.addlink:link,
    #nav-sidebar .module td a.addlink:visited {
        padding-block: 0.6rem;
        line-height: 1.3rem;
    }

    #nav-sidebar > #user-tools,
    #mnss-nav-menu > #user-tools {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        margin: 0.5rem 0 0;
        padding: 0.9rem 1rem 1.1rem;
        border-top: 1px solid var(--border);
        text-align: start;
    }

    #mnss-nav-menu > #user-tools {
        margin-top: 0;
        border-top: 0;
    }

    #nav-sidebar > #user-tools .mnss-welcome,
    #mnss-nav-menu > #user-tools .mnss-welcome {
        padding-bottom: 0.4rem;
        white-space: normal;
    }

    #nav-sidebar > #user-tools .mnss-userlinks,
    #mnss-nav-menu > #user-tools .mnss-userlinks {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    #nav-sidebar #user-tools .mnss-userlinks a,
    #mnss-nav-menu #user-tools .mnss-userlinks a {
        display: block;
        padding: 0.6rem 0;
    }

    #nav-sidebar #user-tools .mnss-userlinks a::after,
    #mnss-nav-menu #user-tools .mnss-userlinks a::after {
        content: none;
    }

    #nav-sidebar #user-tools .mnss-userlinks #logout-form,
    #mnss-nav-menu #user-tools .mnss-userlinks #logout-form {
        display: block;
        margin-top: 0.7rem;
    }

    #nav-sidebar #user-tools .mnss-userlinks #logout-form button,
    #mnss-nav-menu #user-tools .mnss-userlinks #logout-form button {
        width: 100%;
    }
}

@media (max-width: 1024px) {
    body .button,
    body a.button,
    body input[type=submit],
    body input[type=button],
    body input[type=reset],
    body .submit-row input,
    body .submit-row a.deletelink,
    body .submit-row a.closelink,
    body .delete-confirmation form input[type=submit],
    body .delete-confirmation form .cancel-link,
    body .paginator .this-page,
    body .paginator a:link,
    body .paginator a:visited {
        padding: var(--btn-pad-y-sm) var(--btn-pad-x-sm);
    }
}

@media (max-width: 1024px) {
    body .form-row input:not([type]),
    body .form-row input[type=text],
    body .form-row input[type=password],
    body .form-row input[type=email],
    body .form-row input[type=url],
    body .form-row input[type=tel],
    body .form-row input[type=number],
    body .form-row textarea,
    body .form-row select,
    body .form-row .vTextField {
        padding: 0.5rem 1rem;
    }

    body .form-row select {
        height: var(--control-h);
    }

    body #changelist-search .mnss-search-field {
        flex: 1 1 auto;
    }

    body #toolbar form #searchbar {
        width: auto;
        height: auto;
        min-height: 0;
        margin: 0;
        padding: 0;
        flex: 1 1 auto;
    }

    body .aligned label {
        width: auto;
        padding: 0;
    }

    body .selector .selector-filter input {
        padding: 0;
        min-height: 0;
        font-size: 0.8125rem;
    }

    body .selector select.filtered {
        flex: none;
        height: 17rem;
    }

    body .inline-group {
        overflow: hidden;
    }

    body #changelist .actions select {
        background-color: var(--surface);
    }

    body #changelist .actions {
        padding: 0.6rem 1rem;
    }
    body #toolbar,
    body .submit-row {
        padding-inline: 1rem;
    }
}

/* ==========================================================================
   MOBILE  (<= 767px)
   ========================================================================== */
@media (max-width: 767px) {
    body #header,
    body div.breadcrumbs {
        padding-inline: 1rem;
    }
    body #site-name {
        font-size: 1rem;
    }

    body.login #container {
        width: 100%;
        max-width: 27rem;
        margin: 0 auto;
    }
    body.login #header {
        padding: 0 0 1rem;
    }
    body.login #site-name {
        font-size: 1.25rem;
    }
    body.login #content-main {
        padding: 1.25rem;
    }

    body:not(.mnss-nav-drawer) #header {
        position: static;
    }

    #main > #nav-sidebar,
    body.mnss-nav-drawer #mnss-nav-menu {
        width: min(19rem, 88vw);
    }
    body div.breadcrumbs {
        padding-block: 0.8rem 0.7rem;
        line-height: 1.6;
    }
    #changelist-search .mnss-search-field {
        min-width: 0;
        width: 100%;
    }
    body .form-row {
        padding-inline: 1rem;
    }

    body .submit-row {
        flex-direction: row;
        flex-wrap: wrap;
        padding-inline: 1rem;
    }

    body .aligned .form-row > div {
        width: auto;
    }

    body .errornote {
        padding: 0.8rem 1.1rem 0.8rem 2.6rem;
        margin: 0 0 1.25rem;
        font-size: 0.875rem;
    }

    body .selector ul.selector-chooser {
        flex-direction: row;
        justify-content: center;
        width: auto;
        height: auto;
    }

    body .selector .selector-add::after {
        transform: rotate(90deg);
    }

    body .selector .selector-remove::after {
        transform: rotate(-90deg);
    }

    body .selector select.filtered {
        height: 14rem;
        max-height: none;
    }
}

/* ==========================================================================
   MOBILE  (<= 767px)
   ========================================================================== */
@media (max-width: 767px) {
    body .inline-group[data-inline-type="tabular"] {
        overflow: hidden;
    }

    body .mnss-inline-scroll {
        overflow-x: visible;
    }

    body .inline-related.tabular thead {
        display: none;
    }

    body .inline-related.tabular table,
    body .inline-related.tabular tbody,
    body .inline-related.tabular tbody > tr,
    body .inline-related.tabular tbody > tr > td {
        display: block;
        width: auto;
        max-width: none;
    }

    body .inline-related.tabular tbody > tr.empty-form {
        display: none;
    }

    body .inline-related.tabular tbody > tr.form-row {
        padding: 0.8rem 1rem 0.9rem;
        border-bottom: 1px solid var(--border);
    }

    body .inline-related.tabular tbody > tr > td {
        padding: 0;
        border: none;
    }

    body .inline-group .tabular tr td.original {
        width: auto;
        padding: 0;
    }

    body .inline-related.tabular tbody > tr.form-row > td.original p {
        position: static;
        height: auto;
        overflow: visible;
        margin: 0 0 0.55rem;
        padding: 0;
        font-size: 0.75rem;
        color: var(--grey600);
    }

    body .inline-related.tabular tbody > tr.form-row > td[data-label] {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 0.3rem;
        padding-block: 0.4rem;
    }

    body .inline-related.tabular tbody > tr.form-row > td input[type=checkbox] {
        justify-self: start;
    }

    body .inline-related.tabular tbody > tr.form-row > td[data-label]::before {
        content: attr(data-label);
        font-size: 0.6875rem;
        font-weight: 600;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--grey600);
    }

    body .inline-related.tabular tbody > tr.form-row > td input:not([type=checkbox], [type=radio]),
    body .inline-related.tabular tbody > tr.form-row > td textarea,
    body .inline-related.tabular tbody > tr.form-row > td select {
        width: 100%;
        max-width: none;
    }

    body .inline-related.tabular tbody > tr.form-row > td.delete:not(:has(input))::before {
        content: none;
    }

    body .inline-related.tabular tbody > tr.form-row > td.delete .inline-deletelink {
        display: inline-flex;
        float: none;
        width: auto;
        height: auto;
        overflow: visible;
        padding: 0.45rem 0.9rem 0.45rem 2.05rem;
        border-radius: var(--radius-sm);
        color: var(--action-color);
        font-size: 0.8125rem;
        font-weight: 600;
        text-indent: 0;
    }

    body .inline-related.tabular tbody > tr.form-row > td.delete .inline-deletelink::before {
        inset: 0 auto 0 0.6rem;
        width: 0.9rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    #main > #nav-sidebar,
    body.mnss-nav-drawer #mnss-nav-menu,
    .mnss-nav-scrim {
        transition: none;
    }
}