/*
    DJANGO Admin styles
*/

/* VARIABLE DEFINITIONS */
html[data-theme="light"],
:root {
    --brand-blue: #4c63ff;
    --brand-purple: #8a5bff;
    --brand-pink: #ff6bb7;
    --brand-gradient: linear-gradient(90deg, #4c63ff 0%, #8a5bff 55%, #ff6bb7 100%);
    --primary: #5f66d8;
    --secondary: #6b6f85;
    --accent: #6b5cf6;
    --primary-fg: #fff;
    --body-fg: #1f2230;
    --body-bg: #f6f6fb;
    --body-quiet-color: #656b78;
    --body-loud-color: #0f121a;
    --header-color: #2a2f3a;
    --header-branding-color: var(--accent);
    --header-bg: #f7f7fd;
    --header-link-color: #565bdf;
    --breadcrumbs-fg: #5b6170;
    --breadcrumbs-link-fg: #5b6170;
    --breadcrumbs-bg: #eceef7;
    --link-fg: #565bdf;
    --link-hover-color: #3f45c9;
    --link-selected-fg: #4d52c3;
    --hairline-color: #dde0ea;
    --border-color: #cfd4e2;
    --error-fg: #b24c45;
    --message-success-bg: #e8f1ee;
    --message-warning-bg: #f8efdd;
    --message-error-bg: #f6e6e7;
    --darkened-bg: #eff1f7;
    /* A bit darker than --body-bg */
    --selected-bg: #e4e7f6;
    /* E.g. selected table cells */
    --selected-row: #eef0fb;
    --button-fg: #2a2f3a;
    --button-bg: #e6e8f2;
    --button-hover-bg: #d9dced;
    --default-button-bg: #5a5fe0;
    --default-button-hover-bg: #4a4fd4;
    --close-button-bg: #c7ccda;
    --close-button-hover-bg: #b7bdcd;
    --delete-button-bg: #b24c45;
    --delete-button-hover-bg: #9f413a;
    --object-tools-fg: #2a2f3a;
    --object-tools-bg: #e6e8f2;
    --object-tools-hover-bg: #d9dced;
    --font-family-primary: "Source Sans 3", "Noto Sans", sans-serif;
    --font-family-monospace: "Source Code Pro", "Noto Sans Mono", monospace;
}

html,
body {
    height: 100%;
}

body {
    margin: 0;
    padding: 0;
    font-size: 0.875rem;
    font-family: var(--font-family-primary);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    color: var(--body-fg);
    background: var(--body-bg);
}

/* LINKS */

a:link,
a:visited {
    color: var(--link-fg);
    text-decoration: none;
    transition: color 0.15s, background 0.15s;
}

a:focus,
a:hover {
    color: var(--link-hover-color);
    text-decoration: underline;
}

a:focus {
    text-decoration: underline;
}

a img {
    border: none;
}

a.section:link,
a.section:visited {
    color: var(--header-link-color);
    text-decoration: none;
}

a.section:focus,
a.section:hover {
    text-decoration: underline;
}

/* GLOBAL DEFAULTS */

p,
ol,
ul,
dl {
    margin: .2em 0 .8em 0;
}

p {
    padding: 0;
    line-height: 140%;
}

h1,
h2,
h3,
h4,
h5 {
    font-weight: bold;
}

h1 {
    margin: 0 0 20px;
    font-weight: 300;
    font-size: 1.25rem;
    color: var(--body-quiet-color);
}

h2 {
    font-size: 1rem;
    margin: 1em 0 .5em 0;
}

h2.subhead {
    font-weight: normal;
    margin-top: 0;
}

h3 {
    font-size: 0.875rem;
    margin: .8em 0 .3em 0;
    color: var(--body-quiet-color);
    font-weight: bold;
}

h4 {
    font-size: 0.75rem;
    margin: 1em 0 .8em 0;
    padding-bottom: 3px;
}

h5 {
    font-size: 0.625rem;
    margin: 1.5em 0 .5em 0;
    color: var(--body-quiet-color);
    text-transform: uppercase;
    letter-spacing: 1px;
}

ul>li {
    list-style-type: square;
    padding: 1px 0;
}

li ul {
    margin-bottom: 0;
}

li,
dt,
dd {
    font-size: 0.8125rem;
    line-height: 1.25rem;
}

dt {
    font-weight: bold;
    margin-top: 4px;
}

dd {
    margin-left: 0;
}

form {
    margin: 0;
    padding: 0;
}

fieldset {
    margin: 0;
    min-width: 0;
    padding: 0;
    border: none;
    border-top: 1px solid var(--hairline-color);
}

/* CHANGE FORMS */
fieldset.module.aligned .form-row {
    padding: 12px 18px;
}

fieldset.module.aligned .form-row,
fieldset.module.aligned .form-row > div {
    max-width: 100%;
}

fieldset.module.aligned .form-row > div {
    width: 100%;
}

fieldset.module.aligned .flex-container {
    min-width: 0;
    max-width: 100%;
}

fieldset.module.aligned .flex-container > * {
    min-width: 0;
}

blockquote {
    font-size: 0.6875rem;
    color: var(--body-quiet-color);
    margin-left: 2px;
    padding-left: 10px;
    border-left: 3px solid var(--hairline-color);
}

code,
pre {
    font-family: var(--font-family-monospace);
    color: var(--body-quiet-color);
    font-size: 0.75rem;
    overflow-x: auto;
}

pre.literal-block {
    margin: 10px;
    background: var(--darkened-bg);
    padding: 6px 8px;
}

code strong {
    color: var(--accent);
}

hr {
    clear: both;
    color: var(--hairline-color);
    background-color: var(--hairline-color);
    height: 1px;
    border: none;
    margin: 0;
    padding: 0;
    line-height: 1px;
}

/* TEXT STYLES & MODIFIERS */

.small {
    font-size: 0.6875rem;
}

.mini {
    font-size: 0.625rem;
}

.help,
p.help,
form p.help,
div.help,
form div.help,
div.help li {
    font-size: 0.6875rem;
    color: var(--body-quiet-color);
}

div.help ul {
    margin-bottom: 0;
}

.help-tooltip {
    cursor: help;
}

p img,
h1 img,
h2 img,
h3 img,
h4 img,
td img {
    vertical-align: middle;
}

.quiet,
a.quiet:link,
a.quiet:visited {
    color: var(--body-quiet-color);
    font-weight: normal;
}

.clear {
    clear: both;
}

.nowrap {
    white-space: nowrap;
}

.hidden {
    display: none !important;
}

/* TABLES */

table {
    border-collapse: collapse;
    border-color: var(--border-color);
}

td,
th {
    font-size: 0.9rem;
    line-height: 1rem;
    border-bottom: 1px solid var(--hairline-color);
    vertical-align: top;
    padding: 8px;
}

th {
    font-weight: 500;
    text-align: left;
}

thead th,
tfoot td {
    color: var(--body-quiet-color);
    padding: 5px 10px;
    font-size: 0.6875rem;
    background: var(--body-bg);
    border: none;
    border-top: 1px solid var(--hairline-color);
    border-bottom: 1px solid var(--hairline-color);
}

tfoot td {
    border-bottom: none;
    border-top: 1px solid var(--hairline-color);
}

thead th.required {
    color: var(--body-loud-color);
}

tr.alt {
    background: var(--darkened-bg);
}

tr:nth-child(odd),
.row-form-errors {
    background: var(--body-bg);
}

tr:nth-child(even),
tr:nth-child(even) .errorlist,
tr:nth-child(odd)+.row-form-errors,
tr:nth-child(odd)+.row-form-errors .errorlist {
    background: var(--darkened-bg);
}

/* SORTABLE TABLES */

thead th {
    padding: 6px 10px;
    line-height: normal;
    text-transform: none;
    letter-spacing: 0.02em;
    background: var(--darkened-bg);
}

thead th a:link,
thead th a:visited {
    color: var(--body-quiet-color);
}

thead th.sorted {
    background: var(--selected-bg);
}

thead th.sorted .text {
    padding-right: 42px;
}

table thead th .text span {
    padding: 8px 10px;
    display: block;
}

table thead th .text a {
    display: block;
    cursor: pointer;
    padding: 8px 10px;
}

table thead th .text a:focus,
table thead th .text a:hover {
    background: var(--selected-bg);
}

thead th.sorted a.sortremove {
    visibility: hidden;
}

table thead th.sorted:hover a.sortremove {
    visibility: visible;
}

table thead th.sorted .sortoptions {
    display: block;
    padding: 9px 5px 0 5px;
    float: right;
    text-align: right;
}

table thead th.sorted .sortpriority {
    font-size: .8em;
    min-width: 12px;
    text-align: center;
    vertical-align: 3px;
    margin-left: 2px;
    margin-right: 2px;
}

table thead th.sorted .sortoptions a {
    position: relative;
    width: 14px;
    height: 14px;
    display: inline-block;
    background: url(../img/sorting-icons.svg) 0 0 no-repeat;
    background-size: 14px auto;
}

table thead th.sorted .sortoptions a.sortremove {
    background-position: 0 0;
}

table thead th.sorted .sortoptions a.sortremove:after {
    content: '\\';
    position: absolute;
    top: -6px;
    left: 3px;
    font-weight: 200;
    font-size: 1.125rem;
    color: var(--body-quiet-color);
}

table thead th.sorted .sortoptions a.sortremove:focus:after,
table thead th.sorted .sortoptions a.sortremove:hover:after {
    color: var(--link-fg);
}

table thead th.sorted .sortoptions a.sortremove:focus,
table thead th.sorted .sortoptions a.sortremove:hover {
    background-position: 0 -14px;
}

table thead th.sorted .sortoptions a.ascending {
    background-position: 0 -28px;
}

table thead th.sorted .sortoptions a.ascending:focus,
table thead th.sorted .sortoptions a.ascending:hover {
    background-position: 0 -42px;
}

table thead th.sorted .sortoptions a.descending {
    top: 1px;
    background-position: 0 -56px;
}

table thead th.sorted .sortoptions a.descending:focus,
table thead th.sorted .sortoptions a.descending:hover {
    background-position: 0 -70px;
}

/* FORM DEFAULTS */

input,
textarea,
select,
.form-row p,
form .button {
    margin: 2px 0;
    padding: 2px 3px;
    vertical-align: middle;
    font-family: var(--font-family-primary);
    font-weight: normal;
    font-size: 0.875rem;
    line-height: 1.4;
}

.form-row div.help {
    padding: 2px 3px;
}

textarea {
    vertical-align: top;
}

input[type=text],
input[type=password],
input[type=email],
input[type=url],
input[type=number],
input[type=tel],
textarea,
select,
.vTextField {
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 6px 8px;
    margin-top: 0;
    color: var(--body-fg);
    background-color: #fff;
    transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s;
}

input[type=text]:focus,
input[type=password]:focus,
input[type=email]:focus,
input[type=url]:focus,
input[type=number]:focus,
input[type=tel]:focus,
textarea:focus,
select:focus,
.vTextField:focus {
    border-color: var(--link-fg);
    box-shadow: 0 0 0 3px rgba(47, 93, 107, 0.12);
    outline: none;
}

select {
    height: 2rem;
}

select[multiple] {
    /* Allow HTML size attribute to override the height in the rule above. */
    height: auto;
    min-height: 150px;
}

/* FORM BUTTONS */

.button,
input[type=submit],
input[type=button],
.submit-row input,
a.button {
    background: var(--button-bg);
    padding: 10px 15px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--button-fg);
    cursor: pointer;
    font-weight: 500;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

a.button {
    padding: 6px 10px;
}

.button:active,
input[type=submit]:active,
input[type=button]:active,
.button:focus,
input[type=submit]:focus,
input[type=button]:focus,
.button:hover,
input[type=submit]:hover,
input[type=button]:hover {
    background: var(--button-hover-bg);
    border-color: var(--border-color);
}

.button[disabled],
input[type=submit][disabled],
input[type=button][disabled] {
    opacity: 0.4;
}

.button.default,
input[type=submit].default,
.submit-row input.default {
    border-color: var(--default-button-bg);
    color: #fff;
    font-weight: 600;
    background: var(--default-button-bg);
}

.submit-row a.deletelink {
    color: #fff;
}

.submit-row a.deletelink:focus,
.submit-row a.deletelink:hover,
.submit-row a.deletelink:active {
    color: #fff;
}

.button.default:active,
input[type=submit].default:active,
.button.default:focus,
input[type=submit].default:focus,
.button.default:hover,
input[type=submit].default:hover {
    background: var(--default-button-hover-bg);
}

.button[disabled].default,
input[type=submit][disabled].default,
input[type=button][disabled].default {
    opacity: 0.4;
}


/* MODULES */

.module {
    border: 1px solid var(--hairline-color);
    border-radius: 10px;
    margin-bottom: 24px;
    background: #fff;
    box-shadow: 0 1px 0 rgba(34, 38, 64, 0.04);
    overflow: hidden;
}

.module p,
.module ul,
.module h3,
.module h4,
.module dl,
.module pre {
    padding-left: 14px;
    padding-right: 14px;
}

.module blockquote {
    margin-left: 12px;
}

.module ul,
.module ol {
    margin-left: 1.5em;
}

.module h3 {
    margin-top: .6em;
}

.module h2,
.module caption,
.inline-group h2 {
    margin: 0;
    padding: 14px 18px;
    font-weight: 600;
    font-size: 0.875rem;
    text-align: left;
    background: transparent;
    color: var(--body-fg);
    border-bottom: 1px solid var(--hairline-color);
}

.module caption,
.inline-group h2 {
    font-size: 0.8125rem;
    letter-spacing: 0.02em;
    text-transform: none;
    background-color: transparent;
}

.module table {
    border-collapse: collapse;
}

/* MESSAGES & ERRORS */

ul.messagelist {
    padding: 0;
    margin: 0;
}

ul.messagelist li {
    display: block;
    font-weight: 400;
    font-size: 0.8125rem;
    padding: 10px 10px 10px 65px;
    margin: 0 0 10px 0;
    background: var(--message-success-bg) url(../img/icon-yes.svg) 40px 12px no-repeat;
    background-size: 16px auto;
    color: var(--body-fg);
    border: 1px solid var(--hairline-color);
    border-radius: 8px;
    word-break: break-word;
}

ul.messagelist li.warning {
    background: var(--message-warning-bg) url(../img/icon-alert.svg) 40px 14px no-repeat;
    background-size: 14px auto;
}

ul.messagelist li.error {
    background: var(--message-error-bg) url(../img/icon-no.svg) 40px 12px no-repeat;
    background-size: 16px auto;
}

.errornote {
    font-size: 0.875rem;
    font-weight: 700;
    display: block;
    padding: 10px 12px;
    margin: 0 0 10px 0;
    color: var(--error-fg);
    border: 1px solid var(--error-fg);
    border-radius: 4px;
    background-color: var(--body-bg);
    background-position: 5px 12px;
    overflow-wrap: break-word;
}

ul.errorlist {
    margin: 0 0 4px;
    padding: 0;
    color: var(--error-fg);
    background: var(--body-bg);
}

ul.errorlist li {
    font-size: 0.8125rem;
    display: block;
    margin-bottom: 4px;
    overflow-wrap: break-word;
}

ul.errorlist li:first-child {
    margin-top: 0;
}

ul.errorlist li a {
    color: inherit;
    text-decoration: underline;
}

td ul.errorlist {
    margin: 0;
    padding: 0;
}

td ul.errorlist li {
    margin: 0;
}

.form-row.errors {
    margin: 0;
    border: none;
    border-bottom: 1px solid var(--hairline-color);
    background: none;
}

.form-row.errors ul.errorlist li {
    padding-left: 0;
}

.errors input,
.errors select,
.errors textarea,
td ul.errorlist+input,
td ul.errorlist+select,
td ul.errorlist+textarea {
    border: 1px solid var(--error-fg);
}

.description {
    font-size: 0.75rem;
    padding: 5px 0 0 12px;
}

/* BREADCRUMBS */

div.breadcrumbs {
    background: var(--breadcrumbs-bg);
    padding: 10px 40px;
    border: none;
    border-bottom: 1px solid var(--hairline-color);
    color: var(--breadcrumbs-fg);
    text-align: left;
    font-size: 0.75rem;
    letter-spacing: 0.02em;
}

div.breadcrumbs a {
    color: var(--breadcrumbs-link-fg);
}

div.breadcrumbs a:focus,
div.breadcrumbs a:hover {
    color: var(--breadcrumbs-fg);
}

/* ACTION ICONS */

.viewlink,
.inlineviewlink {
    padding-left: 16px;
    background: url(../img/icon-viewlink.svg) 0 1px no-repeat;
}

.hidelink {
    padding-left: 16px;
    background: url(../img/icon-hidelink.svg) 0 1px no-repeat;
}

.addlink {
    padding-left: 16px;
    background: url(../img/icon-addlink.svg) 0 1px no-repeat;
}

.changelink,
.inlinechangelink {
    padding-left: 16px;
    background: url(../img/icon-changelink.svg) 0 1px no-repeat;
}

.deletelink {
    padding-left: 16px;
    background: url(../img/icon-deletelink.svg) 0 1px no-repeat;
}



a.deletelink:focus,
a.deletelink:hover {
    color: var(--delete-button-hover-bg);
    /* XXX Probably unused? */
    text-decoration: none;
}

/* OBJECT TOOLS */

.object-tools {
    font-size: 0.75rem;
    font-weight: 500;
    padding-left: 0;
    float: right;
    position: relative;
    margin-top: -48px;
}

.object-tools li {
    display: block;
    float: left;
    margin-left: 5px;
    height: 1rem;
}

.object-tools a {
    border-radius: 15px;
}

.object-tools a:link,
.object-tools a:visited {
    display: block;
    float: left;
    padding: 3px 12px;
    background: var(--object-tools-bg);
    color: var(--object-tools-fg);
    font-weight: 500;
    font-size: 0.75rem;
    text-transform: none;
    letter-spacing: 0.02em;
    border: 1px solid var(--border-color);
}

.object-tools a:focus,
.object-tools a:hover {
    background-color: var(--object-tools-hover-bg);
}

.object-tools a:focus {
    text-decoration: none;
}

.object-tools a.viewsitelink,
.object-tools a.addlink {
    background-repeat: no-repeat;
    background-position: right 7px center;
    padding-right: 26px;
}

.object-tools a.viewsitelink {
    background-image: url(../img/tooltag-arrowright.svg);
}

.object-tools a.addlink {
    background-image: url(../img/tooltag-add.svg);
}

/* OBJECT HISTORY */

#change-history table {
    width: 100%;
}

#change-history table tbody th {
    width: 16em;
}

#change-history .paginator {
    color: var(--body-quiet-color);
    border-bottom: 1px solid var(--hairline-color);
    background: var(--body-bg);
    overflow: hidden;
}

/* PAGE STRUCTURE */

#container {
    position: relative;
    width: 100%;
    min-width: 980px;
    padding: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
}

#container>.main {
    display: flex;
    flex: 1 0 auto;
}

.main>.content {
    flex: 1 0;
    max-width: 100%;
}

.skip-to-content-link {
    position: absolute;
    top: -999px;
    margin: 5px;
    padding: 5px;
    background: var(--body-bg);
    z-index: 1;
}

.skip-to-content-link:focus {
    left: 0px;
    top: 0px;
}

#content {
    padding: 24px 48px;
}

/* CHANGE LIST TOOLBAR */
#changelist .changelist-form-container {
    padding: 16px 18px 18px;
}

.changelist-toolbar-wrapper {
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
    padding-bottom: 18px;
}

.changelist-toolbar-wrapper::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: var(--hairline-color);
}

.changelist-toolbar {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 6px 0 14px;
    margin-bottom: 12px;
    border-bottom: none;
    max-height: 1000px;
    overflow: hidden;
    transition: max-height 0.2s ease, opacity 0.2s ease;
}

.changelist-toolbar-wrapper.is-collapsed .changelist-toolbar {
    max-height: 0;
    opacity: 0;
    pointer-events: none;
    padding: 0;
    margin: 0;
}

.changelist-toolbar-toggle {
    align-self: center;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid var(--hairline-color);
    background: #fff;
    color: var(--body-quiet-color);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
    position: relative;
    z-index: 1;
    margin-bottom: -12px;
    background: var(--body-bg);
}

.changelist-toolbar-toggle::before {
    content: "";
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-135deg);
    transition: transform 0.2s ease;
}

.changelist-toolbar-wrapper.is-collapsed .changelist-toolbar-toggle::before {
    transform: rotate(45deg);
}

.changelist-toolbar-toggle:hover,
.changelist-toolbar-toggle:focus {
    color: var(--link-fg);
    border-color: var(--border-color);
}

.changelist-toolbar-section {
    background: var(--darkened-bg);
    border: 1px solid var(--hairline-color);
    border-radius: 12px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.changelist-toolbar .section-title {
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--body-quiet-color);
    font-weight: 700;
}

.changelist-toolbar #toolbar {
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
}

.changelist-toolbar #toolbar form {
    margin: 0;
}

.changelist-toolbar .search-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-start;
}

.changelist-toolbar .search-label {
    font-size: 0.75rem;
    color: var(--body-quiet-color);
    font-weight: 600;
}

.changelist-toolbar .search-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.changelist-toolbar #toolbar form input,
.changelist-toolbar #toolbar form select {
    margin: 0;
}

.changelist-toolbar #toolbar label {
    display: block;
}

.changelist-toolbar #searchbar {
    min-width: 260px;
    height: 2rem;
    padding: 6px 8px;
    flex: 1 1 320px;
}

.changelist-toolbar .changelist-search {
    max-width: 560px;
}

.changelist-toolbar .changelist-filters-inline {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 10px 16px;
    align-items: center;
}

.changelist-toolbar.has-search .changelist-filters-inline {
    margin-left: 0;
}

.changelist-toolbar .filter-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.changelist-toolbar .filter-label {
    font-size: 0.75rem;
    color: var(--body-quiet-color);
    font-weight: 600;
    text-align: left;
}

.changelist-toolbar .filter-select {
    width: 100%;
    height: 2rem;
}

.changelist-toolbar input[type="submit"] {
    height: 2rem;
    padding: 6px 10px;
}

.changelist-toolbar .filter-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.75rem;
    color: var(--body-quiet-color);
    grid-column: 1 / -1;
    margin-top: 4px;
}

.changelist-toolbar .filter-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: #fff;
    color: var(--link-fg);
    font-size: 0.75rem;
    font-weight: 600;
    text-decoration: none;
}

.changelist-toolbar .filter-action--counts::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--link-fg);
}

.changelist-toolbar .filter-action--counts.is-active {
    background: var(--link-fg);
    border-color: var(--link-fg);
    color: #fff;
}

.changelist-toolbar .filter-action--counts.is-active::before {
    background: rgba(255, 255, 255, 0.85);
}

.changelist-toolbar .filter-action--clear {
    background: var(--darkened-bg);
    color: var(--body-fg);
}

/* CHANGE LIST ACTIONS */
#changelist .actions {
    padding: 10px 12px;
    margin: 8px 0 12px;
    background: #fff;
    border: 1px solid var(--hairline-color);
    border-radius: 10px;
    box-shadow: 0 1px 0 rgba(34, 38, 64, 0.04);
    box-sizing: border-box;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

#changelist .actions label {
    font-weight: 600;
    color: var(--body-quiet-color);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

#changelist .actions select {
    background: #fff;
    border-radius: 6px;
    padding: 5px 8px;
    height: 2rem;
    min-width: 160px;
    max-width: 240px;
}

#changelist .actions .button {
    background: var(--button-bg);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--button-fg);
    padding: 6px 12px;
}

#changelist .actions .button:hover,
#changelist .actions .button:focus {
    background: var(--button-hover-bg);
}

#changelist .actions span.action-counter,
#changelist .actions span.all,
#changelist .actions span.clear,
#changelist .actions span.question {
    font-size: 0.75rem;
    color: var(--body-quiet-color);
    white-space: nowrap;
}

#changelist .actions span.question a,
#changelist .actions span.clear a {
    color: var(--link-fg);
}

#changelist .results {
    border: 1px solid var(--hairline-color);
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 1px 0 rgba(34, 38, 64, 0.04);
}

#changelist #result_list {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
}

#changelist #result_list thead th {
    background: #f1f3fb;
    color: var(--body-quiet-color);
    font-weight: 600;
    border-bottom: 1px solid var(--hairline-color);
}

#changelist #result_list th,
#changelist #result_list td {
    padding: 12px 12px;
    vertical-align: top;
    overflow-wrap: anywhere;
    word-break: break-word;
}

#changelist #result_list tbody tr {
    background: #fff;
}

#changelist #result_list tbody tr:nth-child(even) {
    background: #f7f8fc;
}

#changelist #result_list tbody tr:hover {
    background: #eef1ff;
}

@media (max-width: 1100px) {
    .changelist-toolbar .changelist-filters-inline {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    }
}

.change-list #changelist-filter {
    display: none;
}

.dashboard #content {
    width: 600px;
}

#content-main {
    float: left;
    width: 100%;
}

#content-related {
    float: right;
    width: 260px;
    position: relative;
    margin-right: -300px;
}

#footer {
    clear: both;
    padding: 10px;
}

/* COLUMN TYPES */

.colMS {
    margin-right: 300px;
}

.colSM {
    margin-left: 300px;
}

.change-list .colMS {
    margin-right: 0;
}

.change-list .colSM {
    margin-left: 0;
}

.change-list #content-related {
    display: none;
}

.colSM #content-related {
    float: left;
    margin-right: 0;
    margin-left: -300px;
    border-left: none;
    border-right: 1px solid var(--hairline-color);
}

.colSM #content-main {
    float: right;
}

.popup .colM {
    width: auto;
}

/* HEADER */

#header {
    width: auto;
    height: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 40px;
    background: var(--header-bg);
    color: var(--header-color);
    border-bottom: 1px solid var(--hairline-color);
    gap: 20px;
    position: relative;
}

#header::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--brand-gradient);
}

#header a:link,
#header a:visited,
#logout-form button {
    color: var(--header-link-color);
}

#header a:focus,
#header a:hover {
    text-decoration: underline;
}

#branding {
    display: flex;
    align-items: center;
    gap: 12px;
}

#branding img {
    height: 40px;
    width: auto;
    display: block;
}

#site-name {
    padding: 0;
    margin: 0;
    margin-inline-end: 20px;
    font-weight: 300;
    font-size: 1.5rem;
    color: var(--header-branding-color);
}

#site-name a:link,
#site-name a:visited {
    color: var(--accent);
    font-weight: 800;
}

#branding h2 {
    padding: 0 10px;
    font-size: 0.875rem;
    margin: -8px 0 8px 0;
    font-weight: normal;
    color: var(--header-color);
}

#branding a:hover {
    text-decoration: none;
}

#logout-form {
    display: inline;
}

#logout-form button {
    background: none;
    border: 0;
    cursor: pointer;
    font-family: var(--font-family-primary);
}

#user-tools {
    float: right;
    margin: 0 0 0 20px;
    text-align: right;
}

#user-tools,
#logout-form button {
    padding: 0;
    font-weight: 400;
    font-size: 0.75rem;
    letter-spacing: 0;
    text-transform: none;
}

#user-tools a,
#logout-form button {
    border-bottom: 1px solid transparent;
}

#user-tools a:focus,
#user-tools a:hover,
#logout-form button:active,
#logout-form button:hover {
    text-decoration: none;
    border-bottom-color: var(--hairline-color);
}

#logout-form button:active,
#logout-form button:hover {
    margin-bottom: 0;
}

/* SIDEBAR */

#content-related {
    background: var(--darkened-bg);
    border-left: 1px solid var(--hairline-color);
}

#content-related .module {
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
}

#content-related h3 {
    color: var(--body-quiet-color);
    padding: 0 16px;
    margin: 0 0 16px;
}

#content-related h4 {
    font-size: 0.8125rem;
}

#content-related p {
    padding-left: 16px;
    padding-right: 16px;
}

#content-related .actionlist {
    padding: 0;
    margin: 16px;
}

#content-related .actionlist li {
    line-height: 1.2;
    margin-bottom: 10px;
    padding-left: 18px;
}

#content-related .module h2 {
    background: none;
    padding: 12px 16px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--hairline-color);
    font-size: 0.9375rem;
    color: var(--body-fg);
}

/* NAV SIDEBAR */
#nav-sidebar {
    background: var(--darkened-bg);
    padding: 12px 12px 20px;
    border-right: 1px solid var(--hairline-color);
}

#nav-sidebar #nav-filter {
    background: #fff;
    border-radius: 8px;
    padding: 8px 10px;
    margin: 0 0 14px;
    border: 1px solid var(--border-color);
}

#nav-sidebar #nav-filter:focus {
    border-color: var(--link-fg);
    box-shadow: 0 0 0 3px rgba(47, 93, 107, 0.12);
}

#nav-sidebar .module {
    border: 1px solid var(--hairline-color);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    margin: 0 0 14px;
    overflow: hidden;
}

#nav-sidebar .module table {
    border-collapse: separate;
    border-spacing: 0;
    margin: 0;
}

#nav-sidebar .module caption {
    padding: 12px 14px;
    font-weight: 600;
    font-size: 0.8125rem;
    letter-spacing: 0.01em;
    color: var(--body-fg);
    background: transparent;
    border-bottom: 1px solid var(--hairline-color);
}

#nav-sidebar .module caption a.section {
    color: var(--body-fg);
}

#nav-sidebar .module th,
#nav-sidebar .module td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--hairline-color);
    font-size: 0.8125rem;
}

#nav-sidebar .module tr:last-child th,
#nav-sidebar .module tr:last-child td {
    border-bottom: none;
}

#nav-sidebar .module th a {
    color: var(--link-fg);
    font-weight: 600;
}

#nav-sidebar .module td {
    text-align: right;
    white-space: nowrap;
}

#nav-sidebar .module td .addlink {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: 999px;
    border: 1px solid var(--hairline-color);
    background: var(--darkened-bg);
    color: var(--link-fg);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    background-image: none;
}

#nav-sidebar .module td .addlink::before {
    content: "+";
    font-weight: 700;
}

#nav-sidebar .current-model {
    background: var(--selected-bg);
}

/* SELECTOR CONTRAST */
.selector-chosen h2 {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

.selector-chosen .list-footer-display {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

.selector-chosen .list-footer-display__clear {
    color: rgba(255, 255, 255, 0.8);
}

.calendar caption,
.calendarbox h2 {
    color: #fff;
}

.calendar td.selected a {
    color: #fff;
}

.delete-confirmation form input[type="submit"] {
    background: var(--delete-button-bg);
    border-radius: 4px;
    padding: 10px 15px;
    color: #fff;
}

.delete-confirmation form input[type="submit"]:active,
.delete-confirmation form input[type="submit"]:focus,
.delete-confirmation form input[type="submit"]:hover {
    background: var(--delete-button-hover-bg);
}

.delete-confirmation form .cancel-link {
    display: inline-block;
    vertical-align: middle;
    height: 0.9375rem;
    line-height: 0.9375rem;
    border-radius: 4px;
    padding: 10px 15px;
    color: var(--button-fg);
    background: var(--close-button-bg);
    margin: 0 0 0 10px;
}

.delete-confirmation form .cancel-link:active,
.delete-confirmation form .cancel-link:focus,
.delete-confirmation form .cancel-link:hover {
    background: var(--close-button-hover-bg);
}

/* POPUP */
.popup #content {
    padding: 20px;
}

.popup #container {
    min-width: 0;
}

.popup #header {
    padding: 10px 20px;
}

/* RESPONSIVE */
@media (max-width: 1024px) {
    #changelist-toolbar #toolbar form {
        display: block;
        width: 100%;
    }

    #changelist-toolbar .changelist-search {
        max-width: none;
    }

    #changelist-toolbar .search-row {
        flex-direction: column;
        align-items: stretch;
        flex-wrap: nowrap;
        width: 100%;
    }

    #changelist-toolbar #toolbar form #searchbar {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        margin: 0;
        height: 2rem;
        box-sizing: border-box;
        flex: 1 1 auto;
    }

    #changelist-toolbar #toolbar form input[type="submit"] {
        width: 100%;
        min-width: 0;
        margin: 0;
        height: 2rem;
        box-sizing: border-box;
    }

    #changelist #changelist-form .actions {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        min-width: 0;
        overflow-x: hidden;
        padding: 15px 15px;
    }

    #changelist #changelist-form .actions label {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
        max-width: 100%;
        box-sizing: border-box;
        min-width: 0;
    }

    #changelist #changelist-form .actions select {
        width: 100%;
        max-width: none;
        min-width: 0;
        box-sizing: border-box;
        display: block;
        margin: 0 !important;
    }

    #changelist #changelist-form .actions .button {
        width: 100%;
        box-sizing: border-box;
        min-width: 0;
        margin: 0 !important;
    }

    /* Ensure we fully override Django's responsive/changelists action margins. */
    #changelist .actions select,
    #changelist .actions .button {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    #changelist #changelist-form .actions select,
    #changelist #changelist-form .actions .button {
        max-width: 100% !important;
        width: 100% !important;
        max-inline-size: 100% !important;
        inline-size: 100% !important;
        align-self: stretch !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    #changelist #changelist-form .actions>* {
        min-width: 0;
        max-width: 100%;
    }

    #changelist #changelist-form .actions span.action-counter,
    #changelist #changelist-form .actions span.all,
    #changelist #changelist-form .actions span.clear,
    #changelist #changelist-form .actions span.question {
        white-space: normal;
    }
}

@media (max-width: 980px) {
    #container {
        min-width: 0;
    }

    #header {
        flex-wrap: wrap;
        align-items: flex-start;
        padding: 16px 20px;
    }

    #user-tools {
        text-align: left;
        margin: 6px 0 0;
    }

    #content {
        padding: 18px 20px 24px;
    }

    .object-tools {
        float: none;
        margin-top: 8px;
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        justify-content: flex-start;
    }

    .object-tools li {
        float: none;
        margin-left: 0;
    }

    .module {
        border-radius: 10px;
    }

    div.breadcrumbs {
        padding: 10px 20px;
    }
}

@media (max-width: 720px) {
    #header {
        padding: 18px 20px 14px;
    }

    #branding img {
        height: 32px;
    }

    #site-name {
        font-size: 1.25rem;
    }

    .changelist-toolbar {
        padding: 10px 0 12px;
    }

    .changelist-toolbar-section {
        padding: 12px;
    }

    .changelist-toolbar .changelist-search {
        max-width: none;
    }

    .changelist-toolbar .search-row {
        gap: 8px;
        align-items: stretch;
    }

    .changelist-toolbar #searchbar {
        min-width: 0;
        flex: 1 1 100%;
        width: 100%;
    }

    .changelist-toolbar input[type="submit"] {
        width: 100%;
        min-width: 0;
    }

    .changelist-toolbar .changelist-filters-inline {
        grid-template-columns: 1fr;
    }

    .changelist-toolbar .filter-item {
        row-gap: 6px;
    }

    #changelist .actions {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    #changelist .actions label {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    #changelist .actions select {
        width: 100%;
        max-width: none;
        min-width: 0;
        box-sizing: border-box;
    }

    #changelist .actions .button {
        width: 100%;
        box-sizing: border-box;
    }

    #changelist .actions span.action-counter,
    #changelist .actions span.all,
    #changelist .actions span.clear,
    #changelist .actions span.question {
        white-space: normal;
    }

    #changelist .changelist-form-container {
        padding: 16px 16px 18px;
    }

    .module {
        margin-bottom: 18px;
    }

    .module h2,
    .module caption,
    .inline-group h2 {
        padding: 14px 16px;
    }

    .module p,
    .module ul,
    .module h3,
    .module h4,
    .module dl,
    .module pre {
        padding-left: 16px;
        padding-right: 16px;
    }

    #content {
        padding: 22px 24px 32px;
    }

    .module {
        margin-left: 4px;
        margin-right: 4px;
    }

    .paginator {
        flex-wrap: wrap;
    }
}

@media (max-width: 420px) {
    #content {
        padding: 22px 20px 28px;
    }

    #header {
        padding: 16px;
    }

    div.breadcrumbs {
        padding: 10px 20px;
    }

    .module {
        margin-left: 6px;
        margin-right: 6px;
    }

    #changelist .changelist-form-container {
        padding: 14px 14px 16px;
    }
}

/* PAGINATOR */

.paginator {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8125rem;
    padding-top: 10px;
    padding-bottom: 10px;
    line-height: 22px;
    margin: 0;
    border-top: 1px solid var(--hairline-color);
    width: 100%;
}

.paginator a:link,
.paginator a:visited {
    padding: 2px 6px;
    background: var(--button-bg);
    text-decoration: none;
    color: var(--button-fg);
    border: 1px solid var(--border-color);
    border-radius: 6px;
}

.paginator a.showall {
    border: none;
    background: none;
    color: var(--link-fg);
}

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

.paginator .end {
    margin-right: 6px;
}

.paginator .this-page {
    padding: 2px 6px;
    font-weight: bold;
    font-size: 0.8125rem;
    vertical-align: top;
}

.paginator a:focus,
.paginator a:hover {
    color: var(--body-fg);
    background: var(--selected-bg);
    border-color: var(--border-color);
}

.paginator input {
    margin-left: auto;
}

.base-svgs {
    display: none;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    color: var(--body-fg);
    background-color: var(--body-bg);
}