:root,
html[data-theme="light"] {
    --primary: #24AA40;
    --secondary: #24763B;
    --link-fg: var(--secondary);
    --link-hover-color: #164422;
    --link-selected-fg: var(--secondary);
    --header-color: var(--primary-fg);
    --header-link-color: #fff;
    --breadcrumbs-fg: #dbe6ec;
    --breadcrumbs-bg: var(--primary);
    --breadcrumbs-link-fg: #fff;
    --button-bg: #3E9E57;
    --default-button-bg: var(--secondary);
    --button-hover-bg: var(--default-button-bg);
    --default-button-hover-bg: var(--link-hover-color);
    --color-red: #D23B46;
}

html[data-theme="dark"] {
    --primary: #2C9E44;
    --secondary: #34C759;
    --link-fg: #4CD267;
    --link-hover-color: #82E295;
    --link-selected-fg: #4CD267;
    --header-color: var(--primary-fg);
    --header-link-color: #fff;
    --breadcrumbs-fg: #dbe6ec;
    --breadcrumbs-bg: #2C9E44;
    --breadcrumbs-link-fg: #fff;
    --button-bg: #2F9E44;
    --default-button-bg: #1F8A38;
    --button-hover-bg: #3BB854;
    --default-button-hover-bg: #34A247;
    --body-bg: #181818;
    --darkened-bg: #242424;
    --border-color: #4A4A4A;
    --hairline-color: #3A3A3A;
    --color-red: #D23B46;
}

@media (prefers-color-scheme: dark) {
    html[data-theme="auto"] {
        --primary: #2C9E44;
        --secondary: #34C759;
        --link-fg: #4CD267;
        --link-hover-color: #82E295;
        --link-selected-fg: #4CD267;
        --header-color: var(--primary-fg);
        --header-link-color: #fff;
        --breadcrumbs-fg: #dbe6ec;
        --breadcrumbs-bg: #2C9E44;
        --breadcrumbs-link-fg: #fff;
        --button-bg: #2F9E44;
        --default-button-bg: #1F8A38;
        --button-hover-bg: #3BB854;
        --default-button-hover-bg: #34A247;
        --body-bg: #181818;
        --darkened-bg: #242424;
        --border-color: #4A4A4A;
        --hairline-color: #3A3A3A;
    }
}

#header {
    flex-wrap: nowrap;
    gap: 10px;
}

#branding {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}

#branding h1 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
}

#user-tools {
    flex: 0 0 auto;
    white-space: nowrap;
}
.module h2, .module caption, .inline-group h2 {
    font-size: 13px;
    background: var(--primary);
}

fieldset .fieldset-heading, fieldset .inline-heading, :not(.inline-related) .collapse summary {
    background: var(--primary);
}
.admindatefilter .button {
    background: var(--primary) !important;
}
a:not(
    [role="button"],
    #header a,
    #nav-sidebar a,
    #content-main.app-list a,
    .object-tools a
) {
    text-decoration: none;
}
#content-main .module caption a {
    color: inherit;
    text-decoration: none;
}
.object-tools a:focus, .object-tools a:hover {
    background-color: var(--link-hover-color);
}

a.inlineviewlink, a.inlinechangelink {
    background: none;
    padding-left: 0;
}

/* FORM BUTTONS */

.submit-row input.default.no-transform {
    text-transform: none;
}

a.button.red {
    background: var(--color-red);
}

.object-tools .object-tools-btn.red {
    background: var(--color-red);
}

.object-tools .object-tools-btn.red:focus,
.object-tools .object-tools-btn.red:hover {
    background: var(--color-red);
    filter: brightness(0.85);
}

.negative {
    background: #b40522 !important;
}

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

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

/* hover/focus color comes from Django's own rule via --link-hover-color */

/* PAGINATOR */

#changelist .changelist-footer .paginator {
    padding-top: 10px;
    padding-bottom: 10px;
}

#changelist .paginator a:link, #changelist .paginator a:visited {
    background: var(--secondary);
}

#changelist .paginator a.showall {
    border: none;
    background: none;
    color: var(--primary);
}

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

#changelist .paginator a[aria-current="page"] {
    background: transparent;
}

#changelist .paginator a:not([aria-current="page"], .showall):focus,
#changelist .paginator a:not([aria-current="page"], .showall):hover {
    background: var(--link-hover-color);
}

.admin-tabular-inline-pagination .paginator .page-available {
    background-color: var(--primary);
}

.admin-tabular-inline-pagination .paginator .page-selected {
    color: var(--body-quiet-color);
    background-color: transparent;
    font-weight: bold;
}

.admin-tabular-inline-pagination .paginator a:link,
.admin-tabular-inline-pagination .paginator a:visited {
    background-color: var(--primary);
}

.admin-tabular-inline-pagination .paginator .results {
    background-color: transparent;
    color: var(--body-quiet-color);
    font-size: 0.8125rem;
    font-weight: normal;
    padding: 0;
    margin-left: 4px;
}

/* Object tools button - matches Django's .object-tools a styling */
.object-tools .object-tools-btn {
    display: block;
    float: left;
    padding: 3px 12px;
    border: none;
    border-radius: 15px;
    background: var(--object-tools-bg);
    color: var(--object-tools-fg);
    font-weight: 400;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
}

.object-tools .object-tools-btn:focus,
.object-tools .object-tools-btn:hover {
    background-color: var(--object-tools-hover-bg);
}
/* Django 6.0 changelist: keep filter sidebar on the right when table is wide.
   The flex item's implicit min-width:auto honours the table's intrinsic width
   and pushes the filter below. Setting min-width:0 lets it obey its max-width;
   Django's own `.results { overflow-x: auto }` then scrolls the wide table. */
@media (min-width: 768px) {
    #changelist .changelist-form-container {
        flex-wrap: nowrap;
    }
    #changelist .changelist-form-container > div {
        min-width: 0;
    }
}