#nav-sidebar-apps h2,
#nav-sidebar-apps h2 a {
    color: var(--color-primary-600);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.dark #nav-sidebar-apps h2,
.dark #nav-sidebar-apps h2 a {
    color: var(--color-primary-400);
}

#nav-sidebar-apps>div {
    border-top: 1px solid color-mix(in srgb, var(--color-base-300) 28%, transparent);
    margin: 0 1rem 0.8rem;
    padding-top: 0.8rem;
}

#nav-sidebar-apps>div:first-child {
    border-top: 0;
    padding-top: 0;
}

.dark #nav-sidebar-apps>div {
    border-top-color: color-mix(in srgb, var(--color-base-700) 75%, transparent);
}

#nav-sidebar-apps ol.px-6 {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

#nav-sidebar-apps a {
    position: relative;
    transition: background-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

#nav-sidebar-apps a.active {
    background: color-mix(in srgb, var(--color-primary-50) 78%, white);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-primary-200) 65%, transparent);
    color: var(--color-primary-700);
}

#nav-sidebar-apps a.active::before {
    background: linear-gradient(180deg, var(--color-primary-400), var(--color-primary-600));
    border-radius: 999px;
    bottom: 0.4rem;
    content: "";
    left: -0.65rem;
    position: absolute;
    top: 0.4rem;
    width: 3px;
}

.dark #nav-sidebar-apps a.active {
    background: color-mix(in srgb, var(--color-primary-900) 58%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-primary-700) 55%, transparent);
    color: var(--color-primary-300);
}

#nav-sidebar>nav>div:first-child {
    background: linear-gradient(180deg, color-mix(in srgb, var(--color-base-100) 92%, white), color-mix(in srgb, var(--color-base-50) 96%, white));
    border-bottom: 1px solid color-mix(in srgb, var(--color-base-300) 28%, transparent);
    margin-bottom: 1rem;
}

#nav-sidebar>nav>div:first-child .bg-transparent.flex {
    border: none;
    margin: 0.65rem 0.5rem 0.75rem;
    padding-left: 1rem;
    padding-right: 1rem;
}

.dark #nav-sidebar>nav>div:first-child {
    background: linear-gradient(180deg, color-mix(in srgb, var(--color-base-900) 92%, black), color-mix(in srgb, var(--color-base-950) 96%, black));
    border-bottom-color: color-mix(in srgb, var(--color-base-700) 70%, transparent);
}

.dark #nav-sidebar>nav>div:first-child .bg-transparent.flex {
    border: none;
}

#header-inner h1,
#header-inner h1 a,
#header-inner h1 span {
    letter-spacing: 0.01em;
}

.bg-white.border-b.border-base-200.mb-6.px-4.z-40 {
    background: linear-gradient(180deg, color-mix(in srgb, var(--color-base-50) 92%, white), white);
    border-bottom-color: color-mix(in srgb, var(--color-base-300) 26%, transparent);
    box-shadow: 0 1px 0 color-mix(in srgb, var(--color-base-200) 35%, transparent);
}

.dark .bg-white.border-b.border-base-200.mb-6.px-4.z-40 {
    background: linear-gradient(180deg, color-mix(in srgb, var(--color-base-900) 94%, black), color-mix(in srgb, var(--color-base-950) 98%, black));
    border-bottom-color: color-mix(in srgb, var(--color-base-700) 70%, transparent);
    box-shadow: 0 1px 0 color-mix(in srgb, var(--color-base-800) 55%, transparent);
}

thead tr.bg-base-50,
.bg-base-50.sticky.top-0,
.bg-base-50.border-t.border-base-200.font-semibold {
    background: color-mix(in srgb, var(--color-base-100) 70%, white);
}

thead th,
.bg-base-50.border-t.border-base-200.font-semibold {
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.dark thead tr.bg-base-50,
.dark .bg-base-50.sticky.top-0,
.dark .bg-base-50.border-t.border-base-200.font-semibold {
    background: color-mix(in srgb, var(--color-base-900) 88%, black);
}

.inline-block.font-semibold.rounded-default.text-\[11px\].uppercase.whitespace-nowrap,
.font-semibold.h-\[18px\].leading-\[18px\].ml-2.px-1.relative.rounded-xs.text-center.text-\[11px\].whitespace-nowrap.uppercase.min-w-\[18px\] {
    border: 1px solid transparent;
    border-radius: 999px;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 8%, transparent);
    font-size: 0.65rem;
    letter-spacing: 0.08em;
}

.bg-blue-100.text-blue-700,
.bg-blue-500 {
    border-color: color-mix(in srgb, #2563eb 28%, transparent);
}

.bg-green-100.text-green-700,
.bg-green-500 {
    border-color: color-mix(in srgb, #15803d 28%, transparent);
}

.bg-orange-100.text-orange-700,
.bg-orange-500 {
    border-color: color-mix(in srgb, #c2410c 28%, transparent);
}

.bg-red-100.text-red-700,
.bg-red-500 {
    border-color: color-mix(in srgb, #b91c1c 28%, transparent);
}

.bg-primary-100.text-primary-700,
.bg-primary-500 {
    border-color: color-mix(in srgb, var(--color-primary-600) 28%, transparent);
}

.dark .inline-block.font-semibold.rounded-default.text-\[11px\].uppercase.whitespace-nowrap,
.dark .font-semibold.h-\[18px\].leading-\[18px\].ml-2.px-1.relative.rounded-xs.text-center.text-\[11px\].whitespace-nowrap.uppercase.min-w-\[18px\] {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 14%, transparent);
}

.fieldset.group,
fieldset.border.border-base-200,
.border.border-base-200.overflow-hidden.rounded-default.p-3.shadow-xs {
    border-color: color-mix(in srgb, var(--color-base-300) 28%, transparent);
    border-radius: var(--rounded-default);
    box-shadow: 0 10px 28px -20px color-mix(in srgb, var(--color-base-900) 22%, transparent);
}

.dark .fieldset.group,
.dark fieldset.border.border-base-200,
.dark .border.border-base-200.overflow-hidden.rounded-default.p-3.shadow-xs {
    border-color: color-mix(in srgb, var(--color-base-700) 70%, transparent);
    box-shadow: 0 14px 34px -24px color-mix(in srgb, black 70%, transparent);
}

.group.mb-4 label.block.font-semibold,
.flex.flex-col.gap-2>label.block.font-semibold {
    color: var(--color-base-700);
    font-size: 0.74rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.dark .group.mb-4 label.block.font-semibold,
.dark .flex.flex-col.gap-2>label.block.font-semibold {
    color: var(--color-base-300);
}

form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]),
form select,
form textarea,
trix-editor {
    background-color: color-mix(in srgb, var(--color-base-100) 55%, white);
    border-color: color-mix(in srgb, var(--color-base-300) 50%, transparent);
    border-radius: var(--rounded-default);
    box-shadow: inset 0 1px 2px color-mix(in srgb, var(--color-base-900) 4%, transparent);
    transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):focus,
form select:focus,
form textarea:focus,
trix-editor:focus-within {
    border-color: color-mix(in srgb, var(--color-primary-500) 62%, transparent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary-200) 35%, transparent);
}

.dark form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]),
.dark form select,
.dark form textarea,
.dark trix-editor {
    background-color: color-mix(in srgb, var(--color-base-800) 60%, var(--color-base-900));
    border-color: color-mix(in srgb, var(--color-base-600) 80%, transparent);
    box-shadow: inset 0 1px 2px color-mix(in srgb, black 30%, transparent);
}

.dark form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):focus,
.dark form select:focus,
.dark form textarea:focus,
.dark trix-editor:focus-within {
    border-color: color-mix(in srgb, var(--color-primary-500) 58%, transparent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary-900) 55%, transparent);
}

#submit-row>div,
.border-t.border-base-200.flex.justify-end.-mx-3.pt-3.px-3,
.bg-base-50.border-t.border-base-200.flex.flex-row.-m-3.p-3 {
    backdrop-filter: blur(10px);
    background: color-mix(in srgb, white 82%, var(--color-base-50));
    border-top-color: color-mix(in srgb, var(--color-base-300) 28%, transparent);
}

.dark #submit-row>div,
.dark .border-t.border-base-200.flex.justify-end.-mx-3.pt-3.px-3,
.dark .bg-base-50.border-t.border-base-200.flex.flex-row.-m-3.p-3 {
    background: color-mix(in srgb, var(--color-base-900) 80%, black);
    border-top-color: color-mix(in srgb, var(--color-base-700) 70%, transparent);
}

#submit-row .inline-flex.group,
.border-t.border-base-200.flex.justify-end.-mx-3.pt-3.px-3 .inline-flex.group,
.bg-base-50.border-t.border-base-200.flex.flex-row.-m-3.p-3 .inline-flex.group,
#changelist-filter-extra-actions+.inline-flex.group,
#changelist-actions .inline-flex.group {
    border-radius: var(--rounded-default);
    box-shadow: 0 10px 22px -18px color-mix(in srgb, var(--color-base-900) 25%, transparent);
    min-height: 40px;
}

#submit-row .inline-flex.group:not(.bg-red-600):not(.bg-primary-600),
.border-t.border-base-200.flex.justify-end.-mx-3.pt-3.px-3 .inline-flex.group:not(.bg-red-600):not(.bg-primary-600),
.bg-base-50.border-t.border-base-200.flex.flex-row.-m-3.p-3 .inline-flex.group:not(.bg-red-600):not(.bg-primary-600) {
    background: color-mix(in srgb, white 86%, var(--color-base-50));
    border: 1px solid color-mix(in srgb, var(--color-base-300) 26%, transparent);
    color: var(--color-base-700);
}

#submit-row .inline-flex.group.bg-primary-600,
#changelist-actions .bg-primary-600 .inline-flex.group,
.border-t.border-base-200.flex.justify-end.-mx-3.pt-3.px-3 .inline-flex.group[type="submit"] {
    background: linear-gradient(180deg, var(--color-primary-500), var(--color-primary-600));
}

.dark #submit-row .inline-flex.group:not(.bg-red-600):not(.bg-primary-600),
.dark .border-t.border-base-200.flex.justify-end.-mx-3.pt-3.px-3 .inline-flex.group:not(.bg-red-600):not(.bg-primary-600),
.dark .bg-base-50.border-t.border-base-200.flex.flex-row.-m-3.p-3 .inline-flex.group:not(.bg-red-600):not(.bg-primary-600) {
    background: color-mix(in srgb, var(--color-base-800) 88%, black);
    border-color: color-mix(in srgb, var(--color-base-700) 70%, transparent);
    color: var(--color-base-200);
}

#submit-row .inline-flex.group:hover,
.border-t.border-base-200.flex.justify-end.-mx-3.pt-3.px-3 .inline-flex.group:hover,
.bg-base-50.border-t.border-base-200.flex.flex-row.-m-3.p-3 .inline-flex.group:hover {
    transform: translateY(-1px);
}

/* ── Changelist bulk-action bar ──────────────────────────────────── */

#changelist-actions>div {
    background: linear-gradient(135deg, var(--color-primary-700), var(--color-primary-600));
    border-radius: var(--rounded-default);
    box-shadow: 0 6px 24px -12px color-mix(in srgb, var(--color-primary-700) 70%, transparent);
    margin-left: 0;
    margin-right: 0;
    padding: 0.55rem 0.75rem;
}

.dark #changelist-actions>div {
    background: linear-gradient(135deg, var(--color-primary-800), var(--color-primary-700));
    box-shadow: 0 6px 24px -12px color-mix(in srgb, black 60%, transparent);
}

#changelist-actions select {
    background: color-mix(in srgb, white 14%, transparent);
    border-color: color-mix(in srgb, white 20%, transparent);
    border-radius: var(--rounded-default);
    box-shadow: none;
    color: white;
}

#changelist-actions select option {
    background: var(--color-primary-900);
    color: white;
}

/* ── Changelist filter panel ─────────────────────────────────────── */

#changelist-filter,
[id^="changelist-filter-"],
.list-filter-sheet {
    background: color-mix(in srgb, var(--color-base-50) 95%, white);
    border-color: color-mix(in srgb, var(--color-base-300) 25%, transparent);
}

.dark #changelist-filter,
.dark [id^="changelist-filter-"],
.dark .list-filter-sheet {
    background: color-mix(in srgb, var(--color-base-900) 90%, black);
    border-color: color-mix(in srgb, var(--color-base-700) 70%, transparent);
}

#changelist-filter h2,
#changelist-filter h3,
[id^="changelist-filter-"] h2,
[id^="changelist-filter-"] h3 {
    color: var(--color-base-600);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.dark #changelist-filter h2,
.dark #changelist-filter h3,
.dark [id^="changelist-filter-"] h2,
.dark [id^="changelist-filter-"] h3 {
    color: var(--color-base-300);
}

#changelist-filter a,
[id^="changelist-filter-"] a {
    border-radius: var(--rounded-default);
    padding-left: 0.6rem;
    padding-right: 0.6rem;
    transition: background-color 140ms ease, color 140ms ease;
}

#changelist-filter a.selected,
[id^="changelist-filter-"] a.selected {
    background: color-mix(in srgb, var(--color-primary-50) 85%, white);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-primary-200) 60%, transparent);
    color: var(--color-primary-700);
    font-weight: 600;
}

.dark #changelist-filter a.selected,
.dark [id^="changelist-filter-"] a.selected {
    background: color-mix(in srgb, var(--color-primary-900) 55%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-primary-700) 50%, transparent);
    color: var(--color-primary-300);
}

/* ── Dashboard / widget cards ────────────────────────────────────── */

.bg-white.border.border-base-200.rounded-default.shadow-xs,
.dark\:border-base-800.border.border-base-200.rounded-default {
    border-color: color-mix(in srgb, var(--color-base-300) 26%, transparent);
    border-radius: var(--rounded-default);
    box-shadow:
        0 1px 2px color-mix(in srgb, var(--color-base-900) 3%, transparent),
        0 8px 24px -16px color-mix(in srgb, var(--color-base-900) 14%, transparent);
}

.dark .bg-white.border.border-base-200.rounded-default.shadow-xs,
.dark .dark\:border-base-800.border.border-base-200.rounded-default {
    border-color: color-mix(in srgb, var(--color-base-700) 65%, transparent);
    box-shadow:
        0 1px 2px color-mix(in srgb, black 20%, transparent),
        0 10px 28px -18px color-mix(in srgb, black 60%, transparent);
}

/* Card header / metric title */
.font-semibold.text-2xl.text-font-important-light,
h3.font-semibold.mb-1.text-font-important-light.text-sm {
    letter-spacing: -0.01em;
}

/* Dense stat number — big numerals in dashboard cards */
.text-2xl.font-semibold,
.text-3xl.font-semibold,
.text-4xl.font-semibold {
    font-feature-settings: "tnum" 1, "lnum" 1;
    font-variant-numeric: tabular-nums lining-nums;
    letter-spacing: -0.02em;
}

/* Card footer / subtle row */
.border-t.border-base-200.flex.items-center.-mb-6.-mx-6.mt-6.pb-2.pt-2.px-6.text-sm {
    background: color-mix(in srgb, var(--color-base-50) 72%, white);
    border-top-color: color-mix(in srgb, var(--color-base-200) 50%, transparent);
    font-size: 0.72rem;
    letter-spacing: 0.03em;
}

.dark .border-t.border-base-200.flex.items-center.-mb-6.-mx-6.mt-6.pb-2.pt-2.px-6.text-sm {
    background: color-mix(in srgb, var(--color-base-900) 72%, black);
    border-top-color: color-mix(in srgb, var(--color-base-700) 55%, transparent);
}

/* Pagination — compact, monospaced numbers */
.flex.flex-row.grow.items-center a,
.flex.flex-row.grow.items-center span.this-page {
    font-feature-settings: "tnum" 1;
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
}

/* Row-level result count label */
#result_list tfoot td,
.paginator,
.paginator a {
    color: var(--color-base-500);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
}

/* ── Fieldset / section headings on edit pages ───────────────────── */

fieldset.module h2.border-dashed {
    background: linear-gradient(90deg,
            color-mix(in srgb, var(--color-primary-50) 60%, white),
            transparent 80%);
    border-bottom-color: color-mix(in srgb, var(--color-primary-200) 55%, transparent) !important;
    border-top-color: color-mix(in srgb, var(--color-base-200) 40%, transparent) !important;
    color: var(--color-primary-700) !important;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    margin-bottom: 0.25rem;
    text-transform: uppercase;
}

.dark fieldset.module h2.border-dashed {
    background: linear-gradient(90deg,
            color-mix(in srgb, var(--color-primary-900) 45%, transparent),
            transparent 80%);
    border-bottom-color: color-mix(in srgb, var(--color-primary-800) 60%, transparent) !important;
    border-top-color: color-mix(in srgb, var(--color-base-700) 40%, transparent) !important;
    color: var(--color-primary-300) !important;
}