django-bootstrap6-admin 0.1.0__py3-none-any.whl

django_bootstrap6_admin/static/django_bootstrap6_admin/css/admin.css

@@ -0,0 +1,3530 @@
+/* ==========================================================================
+   django-bootstrap6-admin
+   A Bootstrap 6 skin for the Django admin.
+   ========================================================================== */
+
+/* --------------------------------------------------------------------------
+   1. Design tokens and Django admin variable bridge
+   -------------------------------------------------------------------------- */
+
+:root {
+    --ba-topbar-height: 64px;
+    --ba-sidebar-width: 272px;
+    --ba-content-max: 1600px;
+
+    --ba-topbar-bg: light-dark(#172b45, #0c1520);
+    --ba-topbar-fg: light-dark(#f3f7fb, #e5edf6);
+    --ba-topbar-muted: light-dark(#aebed0, #9fb0c2);
+    --ba-canvas: light-dark(#f4f6f9, #0d141c);
+    --ba-surface: light-dark(#ffffff, #151f2b);
+    --ba-surface-muted: light-dark(#f8fafc, #111a24);
+    --ba-border: light-dark(#dce3eb, #2d3a4b);
+    --ba-border-strong: light-dark(#c6d0dc, #3b4b5f);
+    --ba-gold: light-dark(#c99b54, #d6b46f);
+    --ba-shadow-sm: 0 1px 2px rgb(23 43 69 / 0.06);
+    --ba-shadow-md: 0 0.5rem 1.5rem rgb(23 43 69 / 0.08);
+    --ba-shadow-lg: 0 1rem 3rem rgb(23 43 69 / 0.16);
+    --ba-radius: var(--bs-radius-7);
+    --ba-radius-sm: var(--bs-radius-5);
+    --ba-text-muted: light-dark(#536274, #b3bfcd);
+    --ba-control-border: light-dark(#7f8d9d, #6b7d91);
+
+    /*
+     * Bootstrap 6's default primary is a very bright blue; white text on it
+     * only reaches ~3.5:1. Use a deeper, accessible blue for light mode and a
+     * slightly lighter one for dark mode.
+     */
+    --bs-primary-base: light-dark(#315e9b, #3f6ea8);
+    --bs-primary-bg: light-dark(#315e9b, #3f6ea8);
+    --bs-primary-contrast: #fff;
+    --bs-primary-fg: light-dark(#244a7d, #a9c8ec);
+    --bs-primary-fg-emphasis: light-dark(#1d3c66, #cfe1f7);
+    --bs-primary-bg-subtle: light-dark(#eaf0f7, #23364b);
+    --bs-primary-bg-muted: light-dark(#d9e4f1, #2f4a66);
+    --bs-primary-border: light-dark(#6688b0, #6f95b8);
+    --bs-secondary-border: light-dark(#8a97a6, #6b7d91);
+    --bs-primary-focus-ring: color-mix(
+        in oklch,
+        var(--bs-primary-bg) 55%,
+        var(--bs-bg-body)
+    );
+
+    --bs-danger-base: light-dark(#b4233a, #c23a53);
+    --bs-danger-bg: light-dark(#b4233a, #c23a53);
+    --bs-danger-contrast: #fff;
+    --bs-danger-fg: light-dark(#a4162e, #f1a9b5);
+    --bs-danger-fg-emphasis: light-dark(#7d1023, #ffd0d6);
+    --bs-danger-bg-subtle: light-dark(#fbefee, #3a2228);
+    --bs-danger-bg-muted: light-dark(#f5d9d9, #4b2a31);
+    --bs-danger-border: light-dark(#b85f68, #d27a86);
+    --bs-danger-focus-ring: color-mix(
+        in oklch,
+        var(--bs-danger-bg) 55%,
+        var(--bs-bg-body)
+    );
+    --ba-select-arrow: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23667085' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
+    --ba-select-arrow-dark: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23aab6c5' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
+
+    /* Django admin CSS variables used by widgets.css / autocomplete.css. */
+    --primary: var(--bs-primary-bg);
+    --primary-fg: var(--bs-primary-contrast);
+    --secondary: var(--bs-secondary-bg);
+    --accent: var(--bs-accent-bg);
+    --body-fg: var(--bs-fg-body);
+    --body-bg: var(--bs-bg-body);
+    --body-quiet-color: var(--bs-fg-3);
+    --body-medium-color: var(--bs-fg-2);
+    --body-loud-color: var(--bs-fg-1);
+    --header-color: var(--ba-topbar-fg);
+    --header-branding-color: var(--ba-gold);
+    --header-bg: var(--ba-topbar-bg);
+    --header-link-color: var(--ba-topbar-fg);
+    --breadcrumbs-fg: var(--bs-fg-3);
+    --breadcrumbs-link-fg: var(--bs-link-color);
+    --breadcrumbs-bg: transparent;
+    --link-fg: var(--bs-link-color);
+    --link-hover-color: var(--bs-link-hover-color);
+    --link-selected-fg: var(--bs-primary-fg-emphasis);
+    --hairline-color: var(--bs-border-muted);
+    --border-color: var(--bs-border-color);
+    --error-fg: var(--bs-danger-fg);
+    --darkened-bg: var(--bs-bg-1);
+    --selected-bg: var(--bs-primary-bg-subtle);
+    --selected-row: var(--bs-primary-bg-subtle);
+    --button-fg: var(--bs-primary-contrast);
+    --button-bg: var(--bs-primary-bg);
+    --button-hover-bg: color-mix(in oklch, var(--bs-primary-bg) 88%, #000);
+    --default-button-bg: var(--bs-primary-bg);
+    --default-button-hover-bg: color-mix(in oklch, var(--bs-primary-bg) 88%, #000);
+    --close-button-bg: var(--bs-secondary-bg);
+    --close-button-hover-bg: var(--bs-secondary-bg-muted);
+    --delete-button-bg: var(--bs-danger-bg);
+    --delete-button-hover-bg: color-mix(in oklch, var(--bs-danger-bg) 88%, #000);
+    --object-tools-fg: var(--bs-primary-contrast);
+    --object-tools-bg: var(--bs-primary-bg);
+    --object-tools-hover-bg: color-mix(in oklch, var(--bs-primary-bg) 88%, #000);
+    --font-family-primary: var(--bs-body-font-family);
+    --font-family-monospace: var(--bs-font-mono);
+}
+
+/* --------------------------------------------------------------------------
+   2. Base
+   -------------------------------------------------------------------------- */
+
+html {
+    min-height: 100%;
+}
+
+body.ba-body {
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+    margin: 0;
+    background: var(--ba-canvas);
+    color: var(--bs-fg-body);
+    font-family: var(--bs-body-font-family);
+    font-size: 0.9375rem;
+    line-height: 1.55;
+}
+
+#container.ba-app {
+    display: flex;
+    flex: 1 0 auto;
+    flex-direction: column;
+    min-height: 100vh;
+}
+
+a {
+    color: var(--bs-link-color);
+    text-decoration: none;
+}
+
+a:hover,
+a:focus {
+    color: var(--bs-link-hover-color);
+}
+
+/*
+ * Bootstrap 6 puts its component styles in cascade layers. Our stylesheet is
+ * intentionally unlayered so it can override the admin, but that also means
+ * the generic `a` rule above would beat the layered `.btn` colour rules.
+ * Restore the button colours explicitly for both <a> and <button> controls.
+ */
+.btn,
+.btn-link,
+.btn-icon,
+.btn-solid,
+.btn-outline,
+.btn-subtle,
+.btn-text {
+    color: var(--bs-btn-color);
+}
+
+.btn:hover,
+.btn-link:hover,
+.btn-icon:hover,
+.btn-solid:hover,
+.btn-outline:hover,
+.btn-subtle:hover,
+.btn-text:hover {
+    color: var(--bs-btn-hover-color, var(--bs-btn-color));
+}
+
+.btn:active,
+.btn.active,
+.btn.show,
+.btn-link:active,
+.btn-icon:active,
+.btn-solid:active,
+.btn-outline:active,
+.btn-subtle:active,
+.btn-text:active {
+    color: var(--bs-btn-active-color, var(--bs-btn-color));
+}
+
+.btn:disabled,
+.btn.disabled,
+.btn-link:disabled,
+.btn-icon:disabled,
+.btn-solid:disabled,
+.btn-outline:disabled,
+.btn-subtle:disabled,
+.btn-text:disabled {
+    color: var(--bs-btn-disabled-color, var(--bs-btn-color));
+}
+
+.btn-outline.theme-secondary {
+    --bs-theme-border: var(--ba-control-border);
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    color: var(--bs-fg-1);
+    font-weight: 700;
+    letter-spacing: -0.015em;
+}
+
+p {
+    line-height: 1.6;
+}
+
+code,
+pre,
+kbd,
+samp {
+    font-family: var(--bs-font-mono);
+}
+
+.ba-icon {
+    width: 1.1rem;
+    height: 1.1rem;
+    flex: 0 0 auto;
+    fill: currentColor;
+    vertical-align: -0.125em;
+}
+
+.ba-svg-sprite {
+    position: absolute;
+    width: 0;
+    height: 0;
+    overflow: hidden;
+}
+
+.skip-to-content-link {
+    position: absolute;
+    inset-block-start: 0.75rem;
+    inset-inline-start: 0.75rem;
+    z-index: 2000;
+    padding: 0.55rem 0.85rem;
+    border-radius: var(--ba-radius-sm);
+    background: var(--bs-primary-bg);
+    color: var(--bs-primary-contrast);
+    font-weight: 600;
+    transform: translateY(-200%);
+    transition: transform 0.15s ease;
+}
+
+.skip-to-content-link:focus {
+    color: var(--bs-primary-contrast);
+    transform: translateY(0);
+}
+
+/* Django admin helpers whose CSS we intentionally do not load. */
+.hidden {
+    display: none !important;
+}
+
+.visually-hidden {
+    position: absolute !important;
+    width: 1px !important;
+    height: 1px !important;
+    padding: 0 !important;
+    margin: -1px !important;
+    overflow: hidden !important;
+    clip: rect(0, 0, 0, 0) !important;
+    white-space: nowrap !important;
+    border: 0 !important;
+}
+
+.clear {
+    clear: both;
+}
+
+.small {
+    font-size: 0.78rem;
+}
+
+.quiet {
+    color: var(--bs-fg-3);
+}
+
+.nowrap {
+    white-space: nowrap;
+}
+
+.errornote {
+    display: block;
+    margin-block-end: 0.75rem;
+    padding: 0.75rem 1rem;
+    border: 1px solid var(--bs-danger-border);
+    border-radius: var(--ba-radius-sm);
+    background: var(--bs-danger-bg-subtle);
+    color: var(--bs-danger-fg-emphasis);
+    font-weight: 600;
+}
+
+.errorlist {
+    margin: 0.25rem 0 0;
+    padding: 0;
+    list-style: none;
+    color: var(--bs-danger-fg);
+    font-size: 0.78rem;
+}
+
+.errorlist li {
+    margin: 0.1rem 0;
+}
+
+/* --------------------------------------------------------------------------
+   3. Top bar
+   -------------------------------------------------------------------------- */
+
+.ba-topbar {
+    position: sticky;
+    inset-block-start: 0;
+    z-index: 1030;
+    background: var(--ba-topbar-bg);
+    color: var(--ba-topbar-fg);
+    box-shadow: 0 1px 0 rgb(255 255 255 / 0.08), var(--ba-shadow-md);
+}
+
+.ba-topbar::after {
+    position: absolute;
+    inset-block-end: 0;
+    inset-inline-start: 0;
+    width: 100%;
+    height: 3px;
+    background: linear-gradient(
+        90deg,
+        var(--ba-gold) 0,
+        var(--ba-gold) 4.5rem,
+        transparent 4.5rem
+    );
+    content: "";
+    opacity: 0.9;
+    pointer-events: none;
+}
+
+.ba-topbar-inner {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    width: 100%;
+    max-width: var(--ba-content-max);
+    min-height: var(--ba-topbar-height);
+    margin-inline: auto;
+    padding: 0.5rem 1.15rem;
+}
+
+.ba-sidebar-toggle {
+    --bs-btn-color: var(--ba-topbar-fg);
+    --bs-btn-bg: transparent;
+    --bs-btn-border-color: rgb(255 255 255 / 0.18);
+    --bs-btn-hover-bg: rgb(255 255 255 / 0.1);
+    --bs-btn-hover-color: #fff;
+    --bs-btn-hover-border-color: rgb(255 255 255 / 0.34);
+    --bs-btn-active-bg: rgb(255 255 255 / 0.16);
+    --bs-btn-active-color: #fff;
+    flex: 0 0 auto;
+    width: 2.5rem;
+    height: 2.5rem;
+    border-radius: var(--ba-radius-sm);
+}
+
+.ba-no-sidebar .ba-sidebar-toggle {
+    display: none;
+}
+
+.ba-branding {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    min-width: 0;
+}
+
+.ba-brand {
+    display: flex;
+    align-items: center;
+    gap: 0.65rem;
+    min-width: 0;
+    color: var(--ba-topbar-fg);
+    text-decoration: none;
+}
+
+.ba-brand:hover,
+.ba-brand:focus {
+    color: #fff;
+}
+
+.ba-brand-mark {
+    display: grid;
+    flex: 0 0 auto;
+    place-items: center;
+    width: 2.35rem;
+    height: 2.35rem;
+    border-radius: 0.65rem;
+    background: #fff;
+    color: var(--ba-topbar-bg);
+    font-size: 1.05rem;
+    font-weight: 800;
+    line-height: 1;
+    box-shadow: 0 2px 0 rgb(0 0 0 / 0.12);
+}
+
+.ba-brand-text {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    line-height: 1.15;
+}
+
+.ba-brand-title {
+    overflow: hidden;
+    color: var(--ba-topbar-fg);
+    font-size: 0.98rem;
+    font-weight: 700;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.ba-brand-subtitle {
+    overflow: hidden;
+    color: var(--ba-topbar-muted);
+    font-size: 0.7rem;
+    font-weight: 500;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.ba-user-tools {
+    display: flex;
+    align-items: center;
+    gap: 0.4rem;
+    margin-inline-start: auto;
+}
+
+.ba-theme-toggle {
+    --bs-btn-color: var(--ba-topbar-fg);
+    --bs-btn-bg: transparent;
+    --bs-btn-border-color: rgb(255 255 255 / 0.18);
+    --bs-btn-hover-bg: rgb(255 255 255 / 0.1);
+    --bs-btn-hover-color: #fff;
+    --bs-btn-hover-border-color: rgb(255 255 255 / 0.34);
+    --bs-btn-active-bg: rgb(255 255 255 / 0.16);
+    --bs-btn-active-color: #fff;
+    width: 2.35rem;
+    height: 2.35rem;
+    border-radius: 50%;
+}
+
+#branding > .ba-theme-toggle {
+    --bs-btn-color: var(--ba-topbar-fg);
+    margin-inline-start: 0.35rem;
+}
+
+.theme-icon-when-auto,
+.theme-icon-when-light,
+.theme-icon-when-dark {
+    display: none;
+}
+
+html:not([data-effective-theme]) .theme-icon-when-auto,
+html[data-effective-theme="light"] .theme-icon-when-light {
+    display: inline-block;
+}
+
+html[data-effective-theme="dark"] .theme-icon-when-dark {
+    display: inline-block;
+}
+
+/*
+ * Django's theme icons use a filled square as the background and a second
+ * path as the glyph. `fill` draws the glyph and `color` paints the square.
+ */
+.ba-theme-toggle .theme-icon-when-auto,
+.ba-theme-toggle .theme-icon-when-dark,
+.ba-theme-toggle .theme-icon-when-light {
+    fill: var(--ba-topbar-fg);
+    color: var(--ba-topbar-bg);
+}
+
+.ba-user-menu-wrap {
+    position: relative;
+}
+
+.ba-user-menu-button {
+    --bs-btn-color: var(--ba-topbar-fg);
+    --bs-btn-bg: rgb(255 255 255 / 0.06);
+    --bs-btn-border-color: rgb(255 255 255 / 0.18);
+    --bs-btn-hover-bg: rgb(255 255 255 / 0.12);
+    --bs-btn-hover-color: #fff;
+    --bs-btn-hover-border-color: rgb(255 255 255 / 0.34);
+    --bs-btn-active-bg: rgb(255 255 255 / 0.16);
+    --bs-btn-active-color: #fff;
+    min-height: 2.35rem;
+    padding: 0.25rem 0.55rem 0.25rem 0.3rem;
+    border-radius: 999px;
+}
+
+.ba-user-avatar {
+    display: grid;
+    flex: 0 0 auto;
+    place-items: center;
+    width: 1.8rem;
+    height: 1.8rem;
+    border-radius: 50%;
+    background: var(--ba-gold);
+    color: #172b45;
+    font-size: 0.78rem;
+    font-weight: 800;
+}
+
+.ba-user-name {
+    max-width: 11rem;
+    overflow: hidden;
+    font-size: 0.84rem;
+    font-weight: 600;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.ba-user-menu-button .ba-chevron {
+    width: 0.85rem;
+    height: 0.85rem;
+    opacity: 0.7;
+}
+
+.menu.ba-user-menu {
+    min-width: 15.5rem;
+    padding: 0.35rem;
+    border: 1px solid var(--ba-border);
+    border-radius: var(--ba-radius);
+    background: var(--ba-surface);
+    color: var(--bs-fg-body);
+    box-shadow: var(--ba-shadow-lg);
+}
+
+.ba-user-menu .menu-header {
+    padding: 0.55rem 0.65rem;
+    color: var(--bs-fg-3);
+    font-size: 0.76rem;
+    font-weight: 500;
+    white-space: normal;
+}
+
+.ba-user-menu .menu-item {
+    display: flex;
+    align-items: center;
+    gap: 0.55rem;
+    width: 100%;
+    padding: 0.5rem 0.65rem;
+    border: 0;
+    border-radius: var(--ba-radius-sm);
+    background: transparent;
+    color: var(--bs-fg-2);
+    font-size: 0.86rem;
+    font-weight: 500;
+    text-align: start;
+}
+
+.ba-user-menu .menu-item:hover,
+.ba-user-menu .menu-item:focus {
+    background: var(--bs-primary-bg-subtle);
+    color: var(--bs-primary-fg-emphasis);
+}
+
+.ba-user-menu .menu-item .ba-icon {
+    width: 1rem;
+    height: 1rem;
+    opacity: 0.85;
+}
+
+.ba-user-menu .menu-divider {
+    margin-block: 0.25rem;
+    border-block-start-color: var(--ba-border);
+}
+
+#user-tools form {
+    margin: 0;
+}
+
+/* --------------------------------------------------------------------------
+   4. Application shell and sidebar
+   -------------------------------------------------------------------------- */
+
+#main {
+    position: relative;
+    display: flex;
+    flex: 1 0 auto;
+    align-items: flex-start;
+    width: 100%;
+    max-width: var(--ba-content-max);
+    margin-inline: auto;
+}
+
+#main.shifted::before {
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: var(--ba-sidebar-width);
+    width: 1px;
+    background: var(--ba-border);
+    content: "";
+    pointer-events: none;
+}
+
+.ba-sidebar {
+    position: sticky;
+    inset-block-start: var(--ba-topbar-height);
+    z-index: 1015;
+    flex: 0 0 var(--ba-sidebar-width);
+    width: var(--ba-sidebar-width);
+    max-height: calc(100vh - var(--ba-topbar-height));
+    margin-inline-start: calc(-1 * var(--ba-sidebar-width));
+    padding: 0.9rem 0.65rem 1.5rem;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    border-inline-end: 1px solid transparent;
+    background: var(--ba-canvas);
+    visibility: hidden;
+    transition:
+        margin-inline-start 0.18s ease,
+        visibility 0.18s ease;
+}
+
+#main.shifted > .ba-sidebar {
+    margin-inline-start: 0;
+    border-inline-end-color: transparent;
+    visibility: visible;
+}
+
+.ba-sr-toggle {
+    position: fixed;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    opacity: 0;
+    pointer-events: none;
+}
+
+.ba-sidebar-mobile-header {
+    display: none;
+}
+
+.ba-sidebar-mobile-title {
+    font-size: 0.85rem;
+    font-weight: 700;
+}
+
+.ba-sidebar-close {
+    width: 2rem;
+    height: 2rem;
+}
+
+.ba-sidebar-search {
+    position: relative;
+    margin-block-end: 0.75rem;
+}
+
+.ba-sidebar-search > .ba-icon {
+    position: absolute;
+    inset-block-start: 50%;
+    inset-inline-start: 0.65rem;
+    width: 0.95rem;
+    height: 0.95rem;
+    color: var(--bs-fg-4);
+    transform: translateY(-50%);
+    pointer-events: none;
+}
+
+#nav-filter {
+    width: 100%;
+    min-height: 2.2rem;
+    padding-inline-start: 2rem;
+    border-color: var(--ba-control-border);
+    background: var(--ba-surface);
+    font-size: 0.82rem;
+}
+
+#nav-filter.no-results {
+    border-color: var(--bs-danger-border);
+    background: var(--bs-danger-bg-subtle);
+}
+
+.ba-sidebar-scroll {
+    min-height: 0;
+}
+
+.ba-nav-app {
+    margin-block-end: 0.85rem;
+}
+
+.ba-nav-app-title {
+    display: block;
+    padding: 0.35rem 0.6rem;
+    color: var(--bs-fg-3);
+    font-size: 0.7rem;
+    font-weight: 800;
+    letter-spacing: 0.075em;
+    line-height: 1.3;
+    text-transform: uppercase;
+}
+
+.ba-nav-app-title:hover,
+.ba-nav-app-title:focus {
+    color: var(--bs-primary-fg);
+}
+
+.ba-nav-table {
+    width: 100%;
+    border-collapse: collapse;
+}
+
+.ba-nav-table th,
+.ba-nav-table td {
+    padding: 0;
+    border: 0;
+}
+
+.ba-nav-table th {
+    width: 100%;
+    font-weight: 500;
+}
+
+.ba-nav-table th > a,
+.ba-nav-table th > span {
+    display: block;
+    padding: 0.38rem 0.6rem;
+    overflow: hidden;
+    border-radius: 0.4rem;
+    color: var(--bs-fg-2);
+    font-size: 0.855rem;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.ba-nav-table th > a:hover,
+.ba-nav-table th > a:focus,
+.ba-nav-app.current-app .ba-nav-app-title {
+    color: var(--bs-primary-fg-emphasis);
+}
+
+.ba-nav-table th > a:hover,
+.ba-nav-table th > a:focus {
+    background: var(--bs-bg-2);
+}
+
+.ba-nav-table .current-model th > a {
+    background: var(--bs-primary-bg-subtle);
+    color: var(--bs-primary-fg-emphasis);
+    font-weight: 600;
+}
+
+.ba-nav-action {
+    width: 1%;
+    padding-inline-end: 0.35rem !important;
+    white-space: nowrap;
+}
+
+.ba-nav-link {
+    display: inline-grid;
+    place-items: center;
+    width: 1.75rem;
+    height: 1.75rem;
+    border-radius: 0.35rem;
+    color: var(--bs-fg-4);
+    opacity: 0;
+    transition:
+        opacity 0.15s ease,
+        background-color 0.15s ease;
+}
+
+.ba-nav-link .ba-icon {
+    width: 0.85rem;
+    height: 0.85rem;
+}
+
+.ba-nav-table tr:hover .ba-nav-link,
+.ba-nav-table tr:focus-within .ba-nav-link {
+    opacity: 1;
+}
+
+.ba-nav-link:hover,
+.ba-nav-link:focus {
+    background: var(--bs-bg-3);
+    color: var(--bs-fg-1);
+    opacity: 1;
+}
+
+/* --------------------------------------------------------------------------
+   5. Breadcrumbs, content and page header
+   -------------------------------------------------------------------------- */
+
+.ba-breadcrumb-nav {
+    width: 100%;
+    max-width: var(--ba-content-max);
+    margin-inline: auto;
+    padding: 0.7rem 1.3rem 0;
+}
+
+@media (min-width: 1024px) {
+    body:has(#main.shifted) .ba-breadcrumb-nav {
+        padding-inline-start: calc(var(--ba-sidebar-width) + 1.3rem);
+    }
+}
+
+.ba-breadcrumb-nav .breadcrumb {
+    gap: 0.05rem;
+    margin: 0;
+    font-size: 0.82rem;
+}
+
+.ba-breadcrumb-nav .breadcrumb-link {
+    gap: 0.35rem;
+    min-height: auto;
+    padding: 0.3rem 0.45rem;
+    color: var(--bs-fg-3);
+    font-weight: 500;
+}
+
+.ba-breadcrumb-nav .breadcrumb-link .ba-icon {
+    width: 0.9rem;
+    height: 0.9rem;
+}
+
+.ba-breadcrumb-nav .breadcrumb-link:hover {
+    color: var(--bs-primary-fg);
+    text-decoration: none;
+}
+
+.ba-breadcrumb-nav .breadcrumb-link.active {
+    color: var(--bs-fg-1);
+    font-weight: 600;
+}
+
+.content {
+    flex: 1 1 auto;
+    min-width: 0;
+    padding: 1.1rem 1.3rem 3rem;
+}
+
+#content {
+    width: 100%;
+}
+
+.titles-and-tools {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 1rem;
+    margin-block-end: 1.25rem;
+}
+
+.titles {
+    min-width: 0;
+}
+
+.ba-page-title {
+    margin: 0;
+    color: var(--bs-fg-1);
+    font-size: clamp(1.45rem, 2.2vw, 1.85rem);
+    font-weight: 750;
+    letter-spacing: -0.03em;
+    line-height: 1.15;
+}
+
+.ba-page-subtitle {
+    max-width: 65ch;
+    margin: 0.35rem 0 0;
+    color: var(--bs-fg-3);
+    font-size: 0.9rem;
+}
+
+.ba-object-tools {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.ba-object-tools ul {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+.ba-object-tools li {
+    list-style: none;
+}
+
+.ba-eyebrow {
+    margin: 0 0 0.25rem;
+    color: var(--bs-primary-fg);
+    font-size: 0.7rem;
+    font-weight: 800;
+    letter-spacing: 0.09em;
+    text-transform: uppercase;
+}
+
+.ba-muted {
+    color: var(--ba-text-muted) !important;
+}
+
+.ba-empty {
+    padding: 1rem;
+    border: 1px dashed var(--ba-border);
+    border-radius: var(--ba-radius);
+    background: var(--ba-surface-muted);
+    color: var(--ba-text-muted);
+    text-align: center;
+}
+
+.ba-empty p {
+    margin: 0;
+}
+
+.ba-empty .btn {
+    margin-block-start: 0.65rem;
+}
+
+.ba-nowrap {
+    white-space: nowrap;
+}
+
+.ba-footer {
+    width: 100%;
+    max-width: var(--ba-content-max);
+    margin-top: auto;
+    margin-inline: auto;
+    padding: 1rem 1.3rem 1.5rem;
+    border-block-start: 1px solid var(--ba-border);
+    color: var(--bs-fg-4);
+    font-size: 0.78rem;
+}
+
+/* --------------------------------------------------------------------------
+   6. Messages
+   -------------------------------------------------------------------------- */
+
+.ba-messages {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    margin-block-end: 1rem;
+}
+
+.alert.ba-message,
+.alert.ba-form-alert,
+.alert.ba-login-alert,
+.alert.ba-callout {
+    display: flex;
+    align-items: flex-start;
+    gap: 0.65rem;
+    padding: 0.7rem 0.85rem;
+    border: 1px solid var(--bs-theme-border);
+    border-radius: var(--ba-radius-sm);
+    background: var(--bs-theme-bg-subtle);
+    color: var(--bs-theme-fg-emphasis);
+    font-size: 0.86rem;
+}
+
+.ba-message-icon,
+.ba-form-alert > .ba-icon,
+.ba-login-alert > .ba-icon,
+.ba-callout > .ba-icon {
+    margin-block-start: 0.1rem;
+}
+
+.ba-message-body {
+    flex: 1 1 auto;
+    min-width: 0;
+}
+
+/* Match the behaviour of Django's unusable_password_field.css with our
+   message container and button markup. */
+form:has(#id_usable_password input[value="true"]:checked) .ba-messages {
+    display: none;
+}
+
+form:has(#id_usable_password input[value="true"]:checked) .ba-submit-actions .unset-password {
+    display: none;
+}
+
+form:has(#id_usable_password input[value="false"]:checked) .ba-submit-actions .set-password {
+    display: none;
+}
+
+.ba-message .btn-close {
+    margin-inline-start: auto;
+    align-self: flex-start;
+}
+
+/* --------------------------------------------------------------------------
+   7. Dashboard
+   -------------------------------------------------------------------------- */
+
+.ba-dashboard {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) 21rem;
+    gap: 1.25rem;
+    align-items: start;
+}
+
+.ba-dashboard:not(:has(.ba-dashboard-aside)),
+.ba-dashboard-single .ba-dashboard {
+    grid-template-columns: minmax(0, 1fr);
+}
+
+.ba-dashboard-main {
+    min-width: 0;
+}
+
+.ba-section-heading {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-end;
+    justify-content: space-between;
+    gap: 0.75rem;
+    margin-block-end: 1rem;
+}
+
+.ba-section-heading h1,
+.ba-section-heading h2 {
+    margin: 0;
+    font-size: 1.2rem;
+    letter-spacing: -0.02em;
+}
+
+.ba-section-heading h1.ba-page-title {
+    font-size: clamp(1.45rem, 2.2vw, 1.85rem);
+}
+
+.ba-app-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
+    gap: 0.9rem;
+}
+
+.ba-app-card {
+    height: 100%;
+    overflow: hidden;
+    border-color: var(--ba-border);
+    border-radius: var(--ba-radius);
+    background: var(--ba-surface);
+    box-shadow: var(--ba-shadow-sm);
+    transition:
+        border-color 0.15s ease,
+        box-shadow 0.15s ease,
+        transform 0.15s ease;
+}
+
+.ba-app-card:hover {
+    border-color: var(--ba-border-strong);
+    box-shadow: var(--ba-shadow-md);
+    transform: translateY(-1px);
+}
+
+.ba-app-card-header {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 0.55rem;
+    padding: 0.75rem 0.85rem;
+    border-block-end: 1px solid var(--ba-border);
+    background: var(--ba-surface-muted);
+}
+
+.ba-app-icon {
+    display: grid;
+    flex: 0 0 auto;
+    place-items: center;
+    width: 1.9rem;
+    height: 1.9rem;
+    border-radius: 0.45rem;
+    background: var(--bs-primary-bg-subtle);
+    color: var(--bs-primary-fg-emphasis);
+    font-size: 0.82rem;
+    font-weight: 800;
+}
+
+.ba-app-name {
+    flex: 1 1 auto;
+    min-width: 0;
+    overflow: hidden;
+    color: var(--bs-fg-1);
+    font-size: 0.92rem;
+    font-weight: 700;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.ba-app-name:hover,
+.ba-app-name:focus {
+    color: var(--bs-primary-fg);
+}
+
+.ba-app-count {
+    flex: 0 0 auto;
+    font-size: 0.68rem;
+}
+
+.ba-app-card .card-body {
+    padding: 0.35rem 0.5rem;
+}
+
+.ba-model-list {
+    display: flex;
+    flex-direction: column;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+.ba-model-list > li {
+    display: flex;
+    align-items: center;
+    gap: 0.35rem;
+    padding: 0.2rem 0.15rem;
+    border-block-end: 1px solid var(--ba-border-muted);
+}
+
+.ba-model-list > li:last-child {
+    border-block-end: 0;
+}
+
+.ba-model-link {
+    display: flex;
+    flex: 1 1 auto;
+    align-items: center;
+    gap: 0.55rem;
+    min-width: 0;
+    padding: 0.28rem 0.25rem;
+    border-radius: 0.35rem;
+    color: var(--bs-fg-2);
+    font-size: 0.86rem;
+    font-weight: 500;
+}
+
+.ba-model-link:hover,
+.ba-model-link:focus {
+    background: var(--bs-bg-2);
+    color: var(--bs-fg-1);
+}
+
+.ba-model-disabled {
+    color: var(--bs-fg-4);
+    cursor: default;
+}
+
+.ba-model-icon {
+    display: grid;
+    flex: 0 0 auto;
+    place-items: center;
+    width: 1.6rem;
+    height: 1.6rem;
+    border-radius: 0.35rem;
+    background: var(--bs-bg-2);
+    color: var(--bs-fg-3);
+    font-size: 0.66rem;
+    font-weight: 800;
+}
+
+.ba-model-name {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.ba-model-actions {
+    display: flex;
+    flex: 0 0 auto;
+    gap: 0.2rem;
+    opacity: 0.45;
+    transition: opacity 0.15s ease;
+}
+
+.ba-model-list > li:hover .ba-model-actions,
+.ba-model-list > li:focus-within .ba-model-actions {
+    opacity: 1;
+}
+
+.ba-model-actions .btn {
+    width: 1.75rem;
+    height: 1.75rem;
+    padding: 0;
+}
+
+.ba-model-actions .ba-icon {
+    width: 0.8rem;
+    height: 0.8rem;
+}
+
+.ba-dashboard-aside {
+    display: flex;
+    flex-direction: column;
+    gap: 0.9rem;
+    min-width: 0;
+}
+
+.ba-recent-card {
+    border-color: var(--ba-border);
+    border-radius: var(--ba-radius);
+    background: var(--ba-surface);
+    box-shadow: var(--ba-shadow-sm);
+}
+
+.ba-recent-card .card-header {
+    padding: 0.75rem 0.9rem;
+    border-block-end: 1px solid var(--ba-border);
+    background: var(--ba-surface-muted);
+}
+
+.ba-recent-card .card-body {
+    padding: 0.75rem 0.9rem;
+}
+
+.ba-card-title {
+    display: flex;
+    align-items: center;
+    gap: 0.45rem;
+    margin: 0;
+    font-size: 0.9rem;
+}
+
+.ba-card-title .ba-icon {
+    width: 1rem;
+    height: 1rem;
+    color: var(--bs-fg-3);
+}
+
+.ba-timeline {
+    display: flex;
+    flex-direction: column;
+    gap: 0.55rem;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+.ba-timeline-item {
+    display: grid;
+    grid-template-columns: 1.75rem minmax(0, 1fr);
+    gap: 0.55rem;
+    align-items: start;
+}
+
+.ba-timeline-icon {
+    display: grid;
+    place-items: center;
+    width: 1.75rem;
+    height: 1.75rem;
+    border-radius: 50%;
+    background: var(--bs-bg-2);
+    color: var(--bs-fg-3);
+}
+
+.ba-timeline-icon .ba-icon {
+    width: 0.8rem;
+    height: 0.8rem;
+}
+
+.ba-log-add .ba-timeline-icon {
+    background: var(--bs-success-bg-subtle);
+    color: var(--bs-success-fg-emphasis);
+}
+
+.ba-log-change .ba-timeline-icon {
+    background: var(--bs-primary-bg-subtle);
+    color: var(--bs-primary-fg-emphasis);
+}
+
+.ba-log-delete .ba-timeline-icon {
+    background: var(--bs-danger-bg-subtle);
+    color: var(--bs-danger-fg-emphasis);
+}
+
+.ba-timeline-content {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    padding-block-start: 0.1rem;
+}
+
+.ba-timeline-object {
+    overflow: hidden;
+    color: var(--bs-fg-2);
+    font-size: 0.82rem;
+    font-weight: 500;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+a.ba-timeline-object:hover,
+a.ba-timeline-object:focus {
+    color: var(--bs-primary-fg);
+}
+
+.ba-timeline-meta {
+    color: var(--ba-text-muted);
+    font-size: 0.72rem;
+}
+
+/* --------------------------------------------------------------------------
+   8. Changelist
+   -------------------------------------------------------------------------- */
+
+.ba-changelist-layout {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) 17.5rem;
+    gap: 1.15rem;
+    align-items: start;
+}
+
+#changelist:not(.filtered) .ba-changelist-layout {
+    grid-template-columns: minmax(0, 1fr);
+}
+
+.ba-changelist-main {
+    display: flex;
+    flex-direction: column;
+    gap: 0.85rem;
+    min-width: 0;
+}
+
+.ba-result-summary {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.35rem;
+    color: var(--ba-text-muted);
+    font-size: 0.78rem;
+}
+
+.ba-filters-toggle-row {
+    display: none;
+}
+
+.ba-filters-toggle {
+    align-self: flex-start;
+}
+
+.ba-filters-close {
+    display: none;
+    flex: 0 0 auto;
+    width: 1.9rem;
+    height: 1.9rem;
+}
+
+.ba-list-actions {
+    display: flex;
+    justify-content: flex-end;
+}
+
+.ba-toolbar,
+.ba-search {
+    min-width: 0;
+}
+
+.ba-toolbar {
+    padding: 0.75rem;
+    border: 1px solid var(--ba-border);
+    border-radius: var(--ba-radius);
+    background: var(--ba-surface);
+    box-shadow: var(--ba-shadow-sm);
+}
+
+.ba-search {
+    display: flex;
+    flex-direction: column;
+    gap: 0.35rem;
+}
+
+.ba-search-field {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: 0.45rem;
+}
+
+.ba-search-icon {
+    position: absolute;
+    inset-inline-start: 0.7rem;
+    width: 0.95rem;
+    height: 0.95rem;
+    color: var(--bs-fg-4);
+    pointer-events: none;
+}
+
+#searchbar {
+    flex: 1 1 auto;
+    min-width: 0;
+    min-height: 2.35rem;
+    padding-inline-start: 2.1rem;
+    border-color: var(--ba-control-border);
+}
+
+.ba-search-field .btn {
+    flex: 0 0 auto;
+}
+
+.ba-search-count,
+.ba-search-help {
+    padding-inline-start: 0.15rem;
+    color: var(--bs-fg-3);
+    font-size: 0.76rem;
+}
+
+.ba-search-count a {
+    font-weight: 600;
+}
+
+.ba-date-hierarchy {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.45rem;
+    padding: 0.5rem 0.15rem;
+    color: var(--bs-fg-3);
+    font-size: 0.8rem;
+}
+
+.ba-date-hierarchy-links {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.25rem;
+}
+
+.ba-date-hierarchy .date-back {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.2rem;
+    padding: 0.25rem 0.5rem;
+    border-radius: 999px;
+    background: var(--bs-bg-2);
+    color: var(--bs-fg-2);
+    font-size: 0.78rem;
+    font-weight: 600;
+}
+
+.ba-date-chip {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+    padding: 0.25rem 0.55rem;
+    border: 1px solid var(--ba-border);
+    border-radius: 999px;
+    background: var(--ba-surface);
+    color: var(--bs-fg-2);
+    font-size: 0.78rem;
+    font-weight: 500;
+}
+
+a.ba-date-chip:hover,
+a.ba-date-chip:focus {
+    border-color: var(--bs-primary-border);
+    background: var(--bs-primary-bg-subtle);
+    color: var(--bs-primary-fg-emphasis);
+}
+
+.ba-date-chip.active {
+    border-color: var(--bs-primary-border);
+    background: var(--bs-primary-bg-subtle);
+    color: var(--bs-primary-fg-emphasis);
+    font-weight: 600;
+}
+
+.ba-table-wrap {
+    overflow-x: auto;
+    border: 1px solid var(--ba-border);
+    border-radius: var(--ba-radius);
+    background: var(--ba-surface);
+    box-shadow: var(--ba-shadow-sm);
+}
+
+#result_list {
+    --bs-table-bg: transparent;
+    width: 100%;
+    margin: 0;
+    border-collapse: separate;
+    border-spacing: 0;
+    background: var(--ba-surface);
+    font-size: 0.86rem;
+}
+
+#result_list thead th {
+    padding: 0.6rem 0.65rem;
+    border-block-end: 1px solid var(--ba-border);
+    background: var(--ba-surface-muted);
+    color: var(--ba-text-muted);
+    font-size: 0.75rem;
+    font-weight: 800;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+    vertical-align: middle;
+    white-space: nowrap;
+}
+
+#result_list thead th a {
+    color: var(--bs-fg-2);
+}
+
+#result_list thead th a:hover,
+#result_list thead th a:focus {
+    color: var(--bs-primary-fg);
+}
+
+#result_list tbody td,
+#result_list tbody th {
+    padding: 0.52rem 0.65rem;
+    border-block-end: 1px solid var(--ba-border-muted);
+    color: var(--bs-fg-2);
+    vertical-align: middle;
+    white-space: nowrap;
+}
+
+#result_list tbody tr:last-child > * {
+    border-block-end: 0;
+}
+
+#result_list tbody tr.selected > * {
+    background: var(--bs-primary-bg-subtle) !important;
+}
+
+#result_list .action-checkbox,
+#result_list .action-checkbox-column {
+    width: 2.1rem;
+    padding-inline-end: 0.2rem;
+    text-align: center;
+}
+
+#result_list .action-checkbox input {
+    margin: 0;
+}
+
+#result_list td a {
+    color: var(--bs-link-color);
+    font-weight: 500;
+}
+
+#result_list td a:hover,
+#result_list td a:focus {
+    color: var(--bs-link-hover-color);
+    text-decoration: underline;
+    text-underline-offset: 0.16em;
+}
+
+#result_list .field-is_active input,
+#result_list .field-order input {
+    max-width: 5.5rem;
+}
+
+#result_list input:not([type="checkbox"]):not([type="radio"]),
+#result_list select,
+#result_list textarea {
+    min-height: 1.95rem;
+    padding: 0.25rem 0.4rem;
+    border: 1px solid var(--ba-control-border);
+    border-radius: 0.3rem;
+    background: var(--bs-bg-body);
+    color: var(--bs-fg-body);
+    font-size: 0.82rem;
+}
+
+#result_list select {
+    padding-inline-end: 1.6rem;
+    background-image: var(--ba-select-arrow);
+    background-position: right 0.45rem center;
+    background-repeat: no-repeat;
+    background-size: 0.65rem;
+}
+
+[data-bs-theme="dark"] #result_list select {
+    background-image: var(--ba-select-arrow-dark);
+}
+
+#result_list input[type="checkbox"],
+#result_list input[type="radio"] {
+    width: 1rem;
+    height: 1rem;
+    margin: 0;
+    accent-color: var(--bs-primary-bg);
+    vertical-align: middle;
+}
+
+.ba-th-inner {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.35rem;
+    min-width: 0;
+}
+
+.ba-th-inner .text {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.ba-th-inner .text a {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.sortoptions {
+    display: inline-flex;
+    flex: 0 0 auto;
+    align-items: center;
+    gap: 0.1rem;
+    margin-inline-start: 0;
+}
+
+.sortoptions a {
+    display: inline-grid;
+    place-items: center;
+    width: 1.5rem;
+    height: 1.5rem;
+    border-radius: 0.25rem;
+    color: var(--bs-fg-4);
+    font-size: 0.72rem;
+    line-height: 1;
+    text-decoration: none;
+}
+
+.sortoptions a:hover,
+.sortoptions a:focus {
+    background: var(--bs-bg-2);
+}
+
+#result_list thead th .text a {
+    display: block;
+    padding-block: 0.2rem;
+}
+
+.sortoptions a:hover,
+.sortoptions a:focus {
+    color: var(--bs-primary-fg);
+}
+
+.sortoptions .sortremove::before {
+    content: "×";
+    font-size: 0.8rem;
+}
+
+.sortoptions .toggle.ascending::before {
+    content: "▲";
+}
+
+.sortoptions .toggle.descending::before {
+    content: "▼";
+}
+
+.sortpriority {
+    display: inline-grid;
+    place-items: center;
+    width: 0.95rem;
+    height: 0.95rem;
+    border-radius: 50%;
+    background: var(--bs-primary-bg-subtle);
+    color: var(--bs-primary-fg-emphasis);
+    font-size: 0.55rem;
+    font-weight: 800;
+}
+
+/* Filters */
+
+.ba-filters {
+    position: sticky;
+    inset-block-start: calc(var(--ba-topbar-height) + 0.75rem);
+    max-height: calc(100vh - var(--ba-topbar-height) - 1.5rem);
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    border: 1px solid var(--ba-border);
+    border-radius: var(--ba-radius);
+    background: var(--ba-surface);
+    box-shadow: var(--ba-shadow-sm);
+}
+
+.ba-filters-header {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.35rem;
+    padding: 0.7rem 0.85rem;
+    border-block-end: 1px solid var(--ba-border);
+    background: var(--ba-surface-muted);
+}
+
+.ba-filters-header h2 {
+    display: flex;
+    align-items: center;
+    gap: 0.4rem;
+    margin: 0;
+    font-size: 0.86rem;
+}
+
+.ba-filters-header h2 .ba-icon {
+    width: 0.95rem;
+    height: 0.95rem;
+    color: var(--bs-fg-3);
+}
+
+.ba-filters-actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.35rem;
+    font-size: 0.75rem;
+}
+
+.ba-clear-filters {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.2rem;
+    color: var(--bs-danger-fg);
+    font-weight: 600;
+}
+
+.ba-clear-filters .ba-icon {
+    width: 0.7rem;
+    height: 0.7rem;
+}
+
+.ba-filters-body {
+    padding: 0.15rem 0.85rem 0.55rem;
+}
+
+.ba-filter {
+    padding: 0.5rem 0;
+    border-block-end: 1px solid var(--ba-border-muted);
+}
+
+.ba-filter:last-child {
+    border-block-end: 0;
+}
+
+.ba-filter-summary {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.4rem;
+    padding: 0.15rem 0;
+    color: var(--bs-fg-2);
+    font-size: 0.8rem;
+    font-weight: 600;
+    list-style: none;
+    cursor: pointer;
+}
+
+.ba-filter-summary::-webkit-details-marker {
+    display: none;
+}
+
+.ba-filter-summary:hover {
+    color: var(--bs-primary-fg);
+}
+
+.ba-filter-chevron {
+    width: 0.8rem;
+    height: 0.8rem;
+    color: var(--bs-fg-4);
+    transition: transform 0.15s ease;
+}
+
+.ba-filter[open] .ba-filter-chevron {
+    transform: rotate(180deg);
+}
+
+.ba-filter-list {
+    display: flex;
+    flex-direction: column;
+    gap: 0.08rem;
+    margin: 0.35rem 0 0;
+    padding: 0;
+    list-style: none;
+}
+
+.ba-filter-list a {
+    display: flex;
+    align-items: center;
+    gap: 0.3rem;
+    padding: 0.28rem 0.45rem;
+    border-radius: 0.35rem;
+    color: var(--bs-fg-3);
+    font-size: 0.79rem;
+}
+
+.ba-filter-list a:hover,
+.ba-filter-list a:focus {
+    background: var(--bs-bg-2);
+    color: var(--bs-fg-1);
+}
+
+.ba-filter-list li.selected a {
+    background: var(--bs-primary-bg-subtle);
+    color: var(--bs-primary-fg-emphasis);
+    font-weight: 600;
+}
+
+.ba-filter-list a .ba-icon,
+.ba-filter-check {
+    width: 0.72rem;
+    height: 0.72rem;
+    flex: 0 0 0.72rem;
+}
+
+/* Actions */
+
+.ba-actions {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.65rem;
+    padding: 0.65rem 0.75rem;
+    border: 1px solid var(--ba-border);
+    border-radius: var(--ba-radius);
+    background: var(--ba-surface);
+    box-shadow: var(--ba-shadow-sm);
+    font-size: 0.82rem;
+}
+
+.ba-actions-top,
+.ba-actions-bottom {
+    width: 100%;
+}
+
+.ba-actions-fields {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.45rem;
+}
+
+.ba-action-label {
+    display: flex;
+    align-items: center;
+    gap: 0.35rem;
+    margin: 0;
+    color: var(--bs-fg-3);
+    font-size: 0.78rem;
+    font-weight: 600;
+}
+
+.ba-actions select {
+    min-width: 12rem;
+    min-height: 2.1rem;
+    padding: 0.3rem 2rem 0.3rem 0.55rem;
+    border: 1px solid var(--ba-control-border);
+    border-radius: var(--ba-radius-sm);
+    background-color: var(--bs-bg-body);
+    color: var(--bs-fg-body);
+    font-size: 0.82rem;
+}
+
+.ba-actions-selection {
+    margin-inline-start: auto;
+    color: var(--bs-fg-3);
+    font-size: 0.78rem;
+}
+
+.ba-actions-selection .question,
+.ba-actions-selection .clear {
+    display: block;
+    margin-block-start: 0.2rem;
+}
+
+.ba-actions-selection a {
+    font-weight: 600;
+}
+
+/* Pagination */
+
+.ba-changelist-footer {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.75rem;
+}
+
+.ba-pagination {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.65rem;
+    width: 100%;
+    padding: 0.25rem 0;
+    font-size: 0.8rem;
+}
+
+.ba-pagination .pagination {
+    margin: 0;
+}
+
+.ba-pagination .this-page {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: var(--bs-pagination-min-height, 2.25rem);
+    padding: var(--bs-pagination-padding-y, 0.35rem) var(--bs-pagination-padding-x, 0.65rem);
+    border: 1px solid var(--bs-primary-bg);
+    background: var(--bs-primary-bg);
+    color: var(--bs-primary-contrast);
+    font-weight: 700;
+}
+
+.ba-pagination-summary {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.5rem;
+    margin-inline-start: auto;
+    color: var(--bs-fg-3);
+}
+
+.ba-pagination-summary .showall {
+    font-weight: 600;
+}
+
+.pagination .page-item .page-link,
+.pagination .page-item .this-page,
+.pagination .page-item > a,
+.pagination .page-item > span {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 2.1rem;
+    min-height: 2.1rem;
+    padding: 0.3rem 0.55rem;
+    border: 1px solid var(--ba-control-border);
+    background: var(--bs-bg-body);
+    color: var(--bs-link-color);
+    font-size: 0.8rem;
+    font-weight: 500;
+    text-decoration: none;
+}
+
+.pagination .page-item > a:hover,
+.pagination .page-item > a:focus {
+    border-color: var(--bs-primary-border);
+    background: var(--bs-primary-bg-subtle);
+    color: var(--bs-primary-fg-emphasis);
+}
+
+.pagination .page-item > a[aria-current="page"],
+.pagination .page-item > span[aria-current="page"],
+.pagination .page-item.active > a,
+.pagination .page-item.active > span {
+    border-color: var(--bs-primary-bg);
+    background: var(--bs-primary-bg);
+    color: var(--bs-primary-contrast);
+    font-weight: 700;
+}
+
+.pagination .page-item:first-child > a,
+.pagination .page-item:first-child > span {
+    border-start-start-radius: var(--bs-radius-4);
+    border-end-start-radius: var(--bs-radius-4);
+}
+
+.pagination .page-item:last-child > a,
+.pagination .page-item:last-child > span {
+    border-start-end-radius: var(--bs-radius-4);
+    border-end-end-radius: var(--bs-radius-4);
+}
+
+.pagination .page-item .page-link,
+.pagination .page-item .this-page {
+    border-radius: var(--bs-radius-4);
+}
+
+/* --------------------------------------------------------------------------
+   9. Form pages
+   -------------------------------------------------------------------------- */
+
+.ba-change-form {
+    max-width: 78rem;
+}
+
+.ba-fieldsets,
+.ba-inlines {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+
+.ba-fieldset,
+.ba-inline-fieldset {
+    min-width: 0;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+    border: 1px solid var(--ba-border);
+    border-radius: var(--ba-radius);
+    background: var(--ba-surface);
+    box-shadow: var(--ba-shadow-sm);
+}
+
+.ba-fieldset-heading,
+.ba-inline-heading {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.5rem;
+    margin: 0;
+    padding: 0.8rem 1rem;
+    border: 0;
+    border-block-end: 1px solid var(--ba-border);
+    background: var(--ba-surface-muted);
+    color: var(--bs-fg-1);
+    font-size: 0.94rem;
+    font-weight: 700;
+    letter-spacing: -0.01em;
+}
+
+.ba-fieldset-description {
+    padding: 0.75rem 1rem;
+    border-block-end: 1px solid var(--ba-border-muted);
+    background: var(--ba-bg-1, var(--bs-bg-1));
+    color: var(--bs-fg-3);
+    font-size: 0.82rem;
+}
+
+.ba-collapse > .ba-collapse-summary {
+    display: block;
+    list-style: none;
+    cursor: pointer;
+}
+
+.ba-collapse > .ba-collapse-summary::-webkit-details-marker {
+    display: none;
+}
+
+.ba-collapse-chevron {
+    width: 0.9rem;
+    height: 0.9rem;
+    color: var(--bs-fg-4);
+    transition: transform 0.15s ease;
+}
+
+.ba-collapse[open] > .ba-collapse-summary .ba-collapse-chevron {
+    transform: rotate(180deg);
+}
+
+.ba-form-row {
+    margin: 0;
+    padding: 0.85rem 1rem;
+    border-block-end: 1px solid var(--ba-border-muted);
+}
+
+.ba-form-row:last-child {
+    border-block-end: 0;
+}
+
+.ba-form-row.ba-form-multiline {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
+    gap: 0.85rem;
+}
+
+.ba-field {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    gap: 0.32rem;
+    min-width: 0;
+}
+
+.ba-form-row.ba-form-multiline > .ba-field {
+    padding: 0;
+}
+
+.ba-field label,
+.ba-form-group label,
+.ba-form-group legend,
+.form-label {
+    margin: 0;
+    color: var(--bs-fg-2);
+    font-size: 0.8rem;
+    font-weight: 650;
+}
+
+.required label,
+label.required {
+    font-weight: 750;
+}
+
+.required label::after,
+label.required::after {
+    margin-inline-start: 0.15rem;
+    color: var(--bs-danger-fg);
+    content: "*";
+}
+
+.ba-field input[type="text"],
+.ba-field input[type="password"],
+.ba-field input[type="email"],
+.ba-field input[type="url"],
+.ba-field input[type="number"],
+.ba-field input[type="date"],
+.ba-field input[type="time"],
+.ba-field input[type="datetime-local"],
+.ba-field input[type="search"],
+.ba-field input[type="tel"],
+.ba-field input[type="file"],
+.ba-field select,
+.ba-field textarea,
+.ba-form-group input[type="text"],
+.ba-form-group input[type="password"],
+.ba-form-group input[type="email"],
+.ba-form-group input[type="url"],
+.ba-form-group input[type="number"],
+.ba-form-group input[type="date"],
+.ba-form-group input[type="time"],
+.ba-form-group input[type="datetime-local"],
+.ba-form-group input[type="search"],
+.ba-form-group input[type="tel"],
+.ba-form-group select,
+.ba-form-group textarea,
+.ba-login-card input[type="text"],
+.ba-login-card input[type="password"],
+.ba-password-card input[type="text"],
+.ba-password-card input[type="password"] {
+    width: 100%;
+    max-width: 46rem;
+    min-height: 2.35rem;
+    padding: 0.45rem 0.65rem;
+    border: 1px solid var(--ba-control-border);
+    border-radius: var(--ba-radius-sm);
+    background: var(--bs-bg-body);
+    color: var(--bs-fg-body);
+    font-family: inherit;
+    font-size: 0.88rem;
+    line-height: 1.35;
+    transition:
+        border-color 0.15s ease,
+        box-shadow 0.15s ease,
+        background-color 0.15s ease;
+}
+
+.ba-field select,
+.ba-form-group select,
+.ba-actions select {
+    padding-inline-end: 2rem;
+    background-image: var(--ba-select-arrow);
+    background-position: right 0.7rem center;
+    background-repeat: no-repeat;
+    background-size: 0.75rem;
+}
+
+[data-bs-theme="dark"] .ba-field select,
+[data-bs-theme="dark"] .ba-form-group select,
+[data-bs-theme="dark"] .ba-actions select {
+    background-image: var(--ba-select-arrow-dark);
+}
+
+[dir="rtl"] .ba-field select,
+[dir="rtl"] .ba-form-group select,
+[dir="rtl"] .ba-actions select {
+    background-position: left 0.7rem center;
+}
+
+.ba-field textarea,
+.ba-form-group textarea {
+    max-width: 54rem;
+    min-height: 6.5rem;
+    resize: vertical;
+}
+
+.ba-field select[multiple],
+.ba-form-group select[multiple] {
+    min-height: 10rem;
+    padding: 0.35rem;
+}
+
+.ba-field input[type="file"],
+.ba-form-group input[type="file"] {
+    padding: 0.35rem;
+}
+
+.ba-field input[type="file"]::file-selector-button,
+.ba-form-group input[type="file"]::file-selector-button {
+    margin: -0.35rem 0.55rem -0.35rem -0.35rem;
+    padding: 0.45rem 0.7rem;
+    border: 0;
+    border-radius: calc(var(--ba-radius-sm) - 2px);
+    background: var(--bs-bg-2);
+    color: var(--bs-fg-2);
+    font-weight: 600;
+    cursor: pointer;
+}
+
+.ba-field input:hover,
+.ba-field select:hover,
+.ba-field textarea:hover,
+.ba-form-group input:hover,
+.ba-form-group select:hover,
+.ba-form-group textarea:hover,
+.ba-login-card input:hover,
+.ba-password-card input:hover {
+    border-color: var(--ba-border-strong);
+}
+
+.ba-field input:focus,
+.ba-field select:focus,
+.ba-field textarea:focus,
+.ba-form-group input:focus,
+.ba-form-group select:focus,
+.ba-form-group textarea:focus,
+.ba-login-card input:focus,
+.ba-password-card input:focus {
+    border-color: var(--bs-primary-border);
+    outline: var(--bs-focus-ring);
+    outline-offset: -1px;
+    background: var(--bs-bg-body);
+    box-shadow: none;
+}
+
+.ba-field input[type="checkbox"],
+.ba-field input[type="radio"],
+.ba-form-group input[type="checkbox"],
+.ba-form-group input[type="radio"],
+.ba-login-card input[type="checkbox"],
+.ba-password-card input[type="checkbox"] {
+    width: 1rem;
+    height: 1rem;
+    margin: 0;
+    accent-color: var(--bs-primary-bg);
+    vertical-align: middle;
+}
+
+.ba-checkbox {
+    display: flex;
+    align-items: center;
+    gap: 0.45rem;
+}
+
+.ba-field .datetime,
+.ba-field .date,
+.ba-field .time {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.4rem;
+    margin: 0;
+}
+
+.ba-field .datetime input,
+.ba-field .date input,
+.ba-field .time input,
+.ba-field input.vDateField,
+.ba-field input.vTimeField {
+    flex: 1 1 9rem;
+    width: auto;
+    max-width: 14rem;
+}
+
+.ba-field .datetimeshortcuts {
+    flex: 0 0 auto;
+}
+
+.ba-field .datetime br {
+    display: none;
+}
+
+.file-upload {
+    margin: 0.25rem 0;
+    font-size: 0.84rem;
+}
+
+.clearable-file-input {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.3rem;
+    margin-inline-start: 0.5rem;
+}
+
+.ba-checkbox label {
+    margin: 0;
+    font-weight: 500;
+}
+
+.ba-field .checkbox label {
+    color: var(--bs-fg-2);
+    font-size: 0.85rem;
+}
+
+.ba-form-group {
+    display: flex;
+    flex-direction: column;
+    gap: 0.32rem;
+    margin-block-end: 0.9rem;
+}
+
+fieldset.ba-form-group {
+    min-width: 0;
+    padding: 0;
+    border: 0;
+}
+
+.ba-radio-group legend {
+    margin: 0;
+    color: var(--bs-fg-2);
+    font-size: 0.8rem;
+    font-weight: 650;
+}
+
+.radiolist {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.35rem 0.9rem;
+}
+
+.radiolist > div,
+.radiolist label {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.3rem;
+    margin: 0;
+}
+
+.ba-form-group:last-of-type {
+    margin-block-end: 0;
+}
+
+.helptext,
+.help,
+.ba-help {
+    color: var(--ba-text-muted);
+    font-size: 0.75rem;
+    line-height: 1.5;
+}
+
+.ba-help ul,
+div.help ul {
+    margin: 0.25rem 0 0;
+    padding-inline-start: 1.1rem;
+}
+
+.errors input,
+.errors select,
+.errors textarea,
+.ba-field.errors input,
+.ba-field.errors select,
+.ba-field.errors textarea,
+.ba-form-group.errors input,
+.ba-form-group.errors select,
+.ba-form-group.errors textarea {
+    border-color: var(--bs-danger-border) !important;
+}
+
+.errors input:focus,
+.errors select:focus,
+.errors textarea:focus,
+.ba-field.errors input:focus,
+.ba-field.errors select:focus,
+.ba-field.errors textarea:focus {
+    outline-color: var(--bs-danger-focus-ring);
+}
+
+.ba-readonly,
+.readonly {
+    padding: 0.4rem 0;
+    color: var(--bs-fg-2);
+    font-size: 0.88rem;
+    overflow-wrap: anywhere;
+}
+
+.ba-nested-fieldset {
+    width: 100%;
+    margin: 0;
+    padding: 0.25rem 0;
+    border: 0;
+}
+
+.ba-nested-fieldset > legend,
+.form-row > fieldset > legend {
+    margin: 0 0 0.35rem;
+    padding: 0;
+    color: var(--bs-fg-2);
+    font-size: 0.8rem;
+    font-weight: 650;
+}
+
+/* Submit bar */
+
+.ba-submit-row {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.75rem;
+    margin-block-start: 1rem;
+    padding: 0.65rem 0.8rem;
+    border: 1px solid var(--ba-border);
+    border-radius: var(--ba-radius);
+    background: var(--ba-surface);
+    box-shadow: var(--ba-shadow-sm);
+}
+
+.ba-submit-row-static {
+    margin-block-start: 1.15rem;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    box-shadow: none;
+}
+
+.ba-submit-actions {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.45rem;
+}
+
+.ba-submit-actions .btn {
+    gap: 0.35rem;
+}
+
+.ba-submit-danger {
+    margin-inline-start: auto;
+}
+
+/* Inlines */
+
+.ba-inline-group {
+    margin-block-start: 1rem;
+}
+
+.ba-inline-fieldset {
+    overflow: hidden;
+}
+
+.ba-inline-heading {
+    cursor: default;
+}
+
+.ba-inline-fieldset .ba-collapse > .ba-collapse-summary .ba-inline-heading {
+    border-block-end: 0;
+}
+
+.ba-inline-fieldset > .errorlist,
+.ba-inline-fieldset > .errorlist.nonform {
+    margin: 0;
+    padding: 0.65rem 1rem;
+}
+
+.ba-inline-table {
+    margin: 0;
+    border-collapse: separate;
+    border-spacing: 0;
+    font-size: 0.83rem;
+}
+
+.ba-inline-table thead th {
+    padding: 0.5rem 0.55rem;
+    border-block-end: 1px solid var(--ba-border);
+    background: var(--ba-surface-muted);
+    color: var(--ba-text-muted);
+    font-size: 0.72rem;
+    font-weight: 800;
+    letter-spacing: 0.035em;
+    text-transform: uppercase;
+    white-space: nowrap;
+}
+
+.ba-inline-table tbody td,
+.ba-inline-table tbody th {
+    padding: 0.42rem 0.55rem;
+    border-block-end: 1px solid var(--ba-border-muted);
+    vertical-align: middle;
+}
+
+.ba-inline-table tbody tr:last-child > * {
+    border-block-end: 0;
+}
+
+.ba-inline-table .form-row > td,
+.ba-inline-table .form-row > th {
+    background: transparent;
+}
+
+.ba-inline-table .original {
+    min-width: 9rem;
+    color: var(--bs-fg-3);
+    font-size: 0.76rem;
+}
+
+.ba-inline-table .original p {
+    margin: 0;
+}
+
+.ba-inline-table .field-__str__ {
+    min-width: 10rem;
+}
+
+.ba-inline-table input[type="text"],
+.ba-inline-table input[type="number"],
+.ba-inline-table input[type="date"],
+.ba-inline-table input[type="time"],
+.ba-inline-table input[type="datetime-local"],
+.ba-inline-table select,
+.ba-inline-table textarea {
+    min-height: 2rem;
+    padding: 0.28rem 0.45rem;
+    border: 1px solid var(--ba-control-border);
+    border-radius: 0.3rem;
+    background: var(--bs-bg-body);
+    color: var(--bs-fg-body);
+    font-size: 0.82rem;
+}
+
+.ba-inline-table textarea {
+    min-height: 3rem;
+}
+
+.ba-inline-table select {
+    padding-inline-end: 1.6rem;
+    background-image: var(--ba-select-arrow);
+    background-position: right 0.45rem center;
+    background-repeat: no-repeat;
+    background-size: 0.65rem;
+}
+
+[data-bs-theme="dark"] .ba-inline-table select {
+    background-image: var(--ba-select-arrow-dark);
+}
+
+.ba-inline-card {
+    padding: 0.9rem 1rem 0.35rem;
+    border-block-end: 1px solid var(--ba-border);
+}
+
+.ba-inline-card:last-of-type {
+    border-block-end: 0;
+}
+
+.ba-inline-card-header {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.5rem;
+    margin-block-end: 0.35rem;
+    padding-block-end: 0.5rem;
+    border-block-end: 1px solid var(--ba-border-muted);
+}
+
+.ba-inline-card-header h3 {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.35rem;
+    margin: 0;
+    font-size: 0.84rem;
+    font-weight: 600;
+}
+
+.ba-inline-card-header .delete {
+    color: var(--bs-danger-fg);
+    font-size: 0.76rem;
+}
+
+.ba-inline-card .ba-fieldset {
+    border: 0;
+    border-radius: 0;
+    background: transparent;
+    box-shadow: none;
+}
+
+.ba-inline-card .ba-fieldset-heading {
+    padding: 0.35rem 0;
+    border: 0;
+    background: transparent;
+    font-size: 0.78rem;
+}
+
+.ba-inline-card .ba-form-row {
+    padding-inline: 0;
+}
+
+.add-row td {
+    padding: 0.55rem !important;
+    border-block-end: 0 !important;
+    background: var(--ba-surface-muted);
+}
+
+.add-row a,
+.add-row td > a {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.3rem;
+    padding: 0.35rem 0.6rem;
+    border: 1px dashed var(--ba-border-strong);
+    border-radius: var(--ba-radius-sm);
+    color: var(--bs-primary-fg);
+    font-size: 0.8rem;
+    font-weight: 600;
+}
+
+.add-row a::before {
+    content: "+";
+    font-size: 1rem;
+    font-weight: 800;
+    line-height: 1;
+}
+
+.add-row a:hover,
+.add-row a:focus {
+    border-style: solid;
+    background: var(--bs-primary-bg-subtle);
+    color: var(--bs-primary-fg-emphasis);
+}
+
+.inline-deletelink,
+.delete-row {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+    color: var(--bs-danger-fg);
+    font-size: 0.78rem;
+    font-weight: 600;
+}
+
+.inline-deletelink:hover,
+.inline-deletelink:focus,
+.delete-row:hover,
+.delete-row:focus {
+    color: color-mix(in oklch, var(--bs-danger-fg) 80%, #000);
+    text-decoration: underline;
+}
+
+.empty-form {
+    display: none !important;
+}
+
+.inlinechangelink,
+.inlineviewlink {
+    margin-inline-start: 0.35rem;
+    font-size: 0.75rem;
+    font-weight: 600;
+}
+
+.row-form-errors td {
+    background: var(--bs-danger-bg-subtle) !important;
+    color: var(--bs-danger-fg-emphasis);
+}
+
+/* Related widgets and Select2 */
+
+.related-widget-wrapper,
+.ba-related-widget {
+    display: flex;
+    align-items: center;
+    gap: 0.35rem;
+    width: 100%;
+}
+
+.related-widget-wrapper > select,
+.related-widget-wrapper > input,
+.related-widget-wrapper > .select2-container {
+    flex: 1 1 auto;
+    min-width: 0;
+    max-width: 100%;
+}
+
+.ba-raw-id {
+    display: flex;
+    align-items: center;
+    gap: 0.35rem;
+    width: 100%;
+}
+
+.ba-raw-id > input {
+    flex: 1 1 auto;
+    min-width: 0;
+}
+
+.ba-raw-id .related-lookup {
+    flex: 0 0 auto;
+    width: 2.1rem;
+    height: 2.1rem;
+    padding: 0;
+}
+
+.ba-related-links {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+    flex: 0 0 auto;
+}
+
+.ba-related-links .btn,
+.related-widget-wrapper > .related-widget-wrapper-link {
+    width: 2rem;
+    height: 2rem;
+    padding: 0;
+}
+
+.ba-related-links .ba-icon,
+.related-widget-wrapper > .related-widget-wrapper-link .ba-icon {
+    width: 0.85rem;
+    height: 0.85rem;
+}
+
+.selector {
+    display: flex;
+    gap: 0.5rem;
+}
+
+.selector select {
+    height: 13.5rem;
+    border-radius: var(--ba-radius-sm);
+}
+
+.selector-available,
+.selector-chosen {
+    min-width: 0;
+}
+
+.selector-available-title,
+.selector-chosen-title {
+    padding: 0.45rem 0.55rem;
+    border: 1px solid var(--ba-border);
+    border-start-start-radius: var(--ba-radius-sm);
+    border-start-end-radius: var(--ba-radius-sm);
+    background: var(--ba-surface-muted);
+    color: var(--bs-fg-2);
+    font-size: 0.78rem;
+    font-weight: 600;
+}
+
+.selector-chosen-title {
+    background: var(--bs-primary-bg-subtle);
+    color: var(--bs-primary-fg-emphasis);
+}
+
+.selector .selector-filter {
+    padding: 0.4rem 0.55rem;
+    border-color: var(--ba-border);
+    font-size: 0.72rem;
+}
+
+.selector .selector-filter input {
+    width: 100%;
+    min-height: 1.85rem;
+    padding: 0.2rem 0.4rem;
+    border: 1px solid var(--ba-control-border);
+    border-radius: 0.3rem;
+    background: var(--bs-bg-body);
+    color: var(--bs-fg-body);
+}
+
+.selector .selector-chooser {
+    align-self: center;
+    padding: 0.25rem;
+    border-radius: 999px;
+    background: var(--bs-bg-2);
+}
+
+.selector-add,
+.selector-remove {
+    border-radius: 0.25rem;
+}
+
+.selector-chooseall,
+.selector-clearall {
+    margin-block-start: 0.35rem;
+    padding: 0.3rem 0.5rem;
+    border-radius: 0.35rem;
+    font-size: 0.72rem;
+}
+
+.selector-chooseall:disabled,
+.selector-clearall:disabled {
+    opacity: 1;
+    border: 1px solid var(--ba-control-border);
+    background: var(--bs-bg-2);
+    color: var(--bs-fg-3);
+}
+
+.datetimeshortcuts {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+    margin-inline-start: 0.35rem;
+}
+
+.datetimeshortcuts button {
+    border-color: var(--ba-border);
+}
+
+.timezonewarning {
+    display: block;
+    margin-block-start: 0.25rem;
+    color: var(--bs-fg-3);
+    font-size: 0.72rem;
+}
+
+.calendarbox,
+.calendar-shortcuts {
+    z-index: 1080;
+    border: 1px solid var(--ba-border);
+    border-radius: var(--ba-radius-sm);
+    background: var(--ba-surface);
+    box-shadow: var(--ba-shadow-lg);
+}
+
+.calendarbox::backdrop,
+.clockbox::backdrop {
+    background: rgb(7 15 25 / 0.25);
+}
+
+.calendarbox {
+    overflow: hidden;
+}
+
+.calendar caption,
+.calendarbox h2 {
+    background: var(--ba-surface-muted);
+    color: var(--bs-fg-1);
+    font-size: 0.8rem;
+    font-weight: 700;
+}
+
+.calendar td a:hover,
+.calendar td a:focus {
+    border-radius: 0.25rem;
+    background: var(--bs-primary-bg-subtle);
+    color: var(--bs-primary-fg-emphasis);
+}
+
+.calendar td.selected a {
+    border-radius: 0.25rem;
+    background: var(--bs-primary-bg);
+    color: var(--bs-primary-contrast);
+}
+
+.calendar-cancel {
+    border: 0;
+    border-block-start: 1px solid var(--ba-border);
+    border-radius: 0;
+    background: var(--ba-surface-muted);
+    color: var(--bs-fg-2);
+}
+
+/* --------------------------------------------------------------------------
+   10. Login
+   -------------------------------------------------------------------------- */
+
+body.login .ba-topbar-inner {
+    min-height: 58px;
+}
+
+.ba-login {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(22rem, 27rem);
+    gap: 2rem;
+    align-items: center;
+    width: 100%;
+    max-width: 68rem;
+    min-height: calc(100vh - var(--ba-topbar-height) - 5rem);
+    margin-inline: auto;
+    padding: 1.5rem 0 2.5rem;
+}
+
+.ba-login-brand {
+    position: relative;
+    overflow: hidden;
+    padding: 2.5rem;
+    border-radius: calc(var(--ba-radius) + 0.25rem);
+    background:
+        radial-gradient(circle at 18% 18%, rgb(201 155 84 / 0.2), transparent 42%),
+        var(--ba-topbar-bg);
+    color: var(--ba-topbar-fg);
+    box-shadow: var(--ba-shadow-lg);
+}
+
+.ba-login-brand::after {
+    position: absolute;
+    inset-block-end: -4rem;
+    inset-inline-end: -4rem;
+    width: 12rem;
+    height: 12rem;
+    border: 1px solid rgb(255 255 255 / 0.14);
+    border-radius: 50%;
+    content: "";
+}
+
+.ba-login-brand-mark {
+    display: grid;
+    place-items: center;
+    width: 3rem;
+    height: 3rem;
+    border-radius: 0.8rem;
+    background: #fff;
+    color: var(--ba-topbar-bg);
+    font-size: 1.3rem;
+    font-weight: 800;
+}
+
+.ba-login-brand h1 {
+    margin: 1.4rem 0 0.6rem;
+    color: #fff;
+    font-size: clamp(1.6rem, 3vw, 2.1rem);
+    letter-spacing: -0.035em;
+}
+
+.ba-login-brand p {
+    max-width: 34ch;
+    margin: 0;
+    color: var(--ba-topbar-muted);
+    font-size: 0.95rem;
+}
+
+.ba-login-facts {
+    display: flex;
+    flex-direction: column;
+    gap: 0.55rem;
+    margin: 1.6rem 0 0;
+    padding: 0;
+    list-style: none;
+}
+
+.ba-login-facts li {
+    display: flex;
+    align-items: center;
+    gap: 0.55rem;
+    color: var(--ba-topbar-fg);
+    font-size: 0.85rem;
+}
+
+.ba-login-facts .ba-icon {
+    width: 1rem;
+    height: 1rem;
+    color: var(--ba-gold);
+}
+
+.ba-login-card {
+    width: 100%;
+    border: 1px solid var(--ba-border);
+    border-radius: var(--ba-radius);
+    background: var(--ba-surface);
+    box-shadow: var(--ba-shadow-lg);
+}
+
+.ba-login-card .card-body {
+    padding: 1.75rem;
+}
+
+.ba-login-title {
+    margin: 0 0 0.25rem;
+    font-size: 1.6rem;
+    letter-spacing: -0.03em;
+}
+
+.ba-login-card .ba-muted {
+    margin-block-end: 1.2rem;
+    font-size: 0.87rem;
+}
+
+.ba-login-card .errorlist {
+    margin-block-start: 0.3rem;
+}
+
+.ba-login-reset {
+    margin-block: 0.85rem 1.1rem;
+    font-size: 0.8rem;
+    font-weight: 500;
+}
+
+.ba-login-card .ba-form-group:last-of-type {
+    margin-block-end: 1rem;
+}
+
+.ba-login-submit {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    width: 100%;
+    margin-block-start: 0.25rem;
+}
+
+.ba-login-alert {
+    margin-block-end: 1rem;
+}
+
+body.login .ba-footer {
+    padding-block-start: 0;
+    border-block-start: 0;
+}
+
+/* --------------------------------------------------------------------------
+   11. Delete, history, password, error and message cards
+   -------------------------------------------------------------------------- */
+
+.ba-delete,
+.ba-password,
+.ba-message-card,
+.ba-error-card {
+    max-width: 52rem;
+}
+
+.ba-confirm-card,
+.ba-password-card,
+.ba-message-card,
+.ba-error-card,
+.ba-history-card {
+    overflow: hidden;
+    border: 1px solid var(--ba-border);
+    border-radius: var(--ba-radius);
+    background: var(--ba-surface);
+    box-shadow: var(--ba-shadow-sm);
+}
+
+.ba-confirm-card .card-body,
+.ba-password-card .card-body,
+.ba-message-card .card-body,
+.ba-error-card .card-body {
+    padding: 1.5rem;
+}
+
+.ba-confirm-icon {
+    display: grid;
+    place-items: center;
+    width: 2.5rem;
+    height: 2.5rem;
+    margin-block-end: 0.75rem;
+    border-radius: 50%;
+    background: var(--bs-danger-bg-subtle);
+    color: var(--bs-danger-fg-emphasis);
+}
+
+.ba-confirm-icon .ba-icon {
+    width: 1.1rem;
+    height: 1.1rem;
+}
+
+.ba-confirm-icon.ba-confirm-success {
+    background: var(--bs-success-bg-subtle);
+    color: var(--bs-success-fg-emphasis);
+}
+
+.ba-confirm-card h1,
+.ba-confirm-card h2,
+.ba-password-card h1,
+.ba-password-card h2,
+.ba-message-card h2,
+.ba-error-card h2 {
+    margin: 0 0 0.5rem;
+    font-size: 1.2rem;
+    letter-spacing: -0.02em;
+}
+
+.ba-confirm-card h3,
+.ba-password-card h3,
+.ba-message-card h3,
+.ba-error-card h3 {
+    margin: 1rem 0 0.4rem;
+    font-size: 0.95rem;
+}
+
+.ba-confirm-card p,
+.ba-password-card p,
+.ba-message-card p,
+.ba-error-card p {
+    color: var(--ba-text-muted);
+    font-size: 0.88rem;
+}
+
+.ba-confirm-actions {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.5rem;
+    margin-block-start: 1.1rem;
+    padding-block-start: 1rem;
+    border-block-start: 1px solid var(--ba-border);
+}
+
+.ba-object-list {
+    max-height: 20rem;
+    margin: 0.75rem 0;
+    padding-inline-start: 1.2rem;
+    overflow-y: auto;
+    color: var(--ba-text-muted);
+    font-size: 0.82rem;
+}
+
+.ba-object-list li {
+    margin-block: 0.15rem;
+}
+
+.ba-error-code {
+    display: block;
+    margin-block-end: 0.25rem;
+    color: var(--bs-primary-fg);
+    font-size: 2.75rem;
+    font-weight: 800;
+    letter-spacing: -0.05em;
+    line-height: 1;
+}
+
+.ba-password {
+    max-width: 42rem;
+}
+
+.ba-history-card .card-body {
+    padding: 0;
+}
+
+.ba-history-card .ba-pagination {
+    padding-inline: 0.85rem;
+}
+
+.ba-history-card .ba-empty {
+    margin: 1rem;
+}
+
+.ba-message-card .card-body,
+.ba-error-card .card-body {
+    text-align: center;
+}
+
+.ba-message-card .ba-confirm-icon,
+.ba-error-card .ba-confirm-icon {
+    margin-inline: auto;
+}
+
+.ba-message-card .btn,
+.ba-error-card .btn {
+    margin-block-start: 0.5rem;
+}
+
+.ba-callout {
+    margin-block-end: 1rem;
+}
+
+/* --------------------------------------------------------------------------
+   12. Popups
+   -------------------------------------------------------------------------- */
+
+body.popup {
+    background: var(--ba-surface);
+}
+
+body.popup #main {
+    display: block;
+    max-width: none;
+}
+
+body.popup .content {
+    padding: 1rem;
+}
+
+body.popup .titles-and-tools {
+    margin-block-end: 0.75rem;
+}
+
+body.popup .ba-submit-row {
+    position: static;
+    box-shadow: none;
+}
+
+/* --------------------------------------------------------------------------
+   13. Responsive
+   -------------------------------------------------------------------------- */
+
+@media (max-width: 1199.98px) {
+    .ba-dashboard {
+        grid-template-columns: minmax(0, 1fr);
+    }
+
+    .ba-changelist-layout {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .ba-filters {
+        display: none;
+        order: -1;
+        position: static;
+        max-height: none;
+        overflow: visible;
+        margin-block-end: 0.85rem;
+    }
+
+    #changelist.ba-filters-open .ba-filters {
+        display: block;
+    }
+
+    .ba-filters-toggle-row {
+        display: flex;
+    }
+
+    .ba-filters-close {
+        display: inline-flex;
+    }
+}
+
+@media (max-width: 1023.98px) {
+    #main {
+        display: block;
+    }
+
+    #main.shifted::before {
+        display: none;
+    }
+
+    .ba-sidebar {
+        position: fixed;
+        inset-block-start: var(--ba-topbar-height);
+        inset-block-end: 0;
+        inset-inline-start: 0;
+        z-index: 1045;
+        width: min(86vw, 20rem);
+        max-height: none;
+        margin: 0;
+        padding-block-end: 2rem;
+        border-inline-end: 1px solid var(--ba-border);
+        background: var(--ba-surface);
+        box-shadow: 0.75rem 0 2rem rgb(0 0 0 / 0.18);
+        visibility: visible;
+        transform: translateX(-105%);
+        transition: transform 0.2s ease;
+    }
+
+    [dir="rtl"] .ba-sidebar {
+        box-shadow: -0.75rem 0 2rem rgb(0 0 0 / 0.18);
+        transform: translateX(105%);
+    }
+
+    #main.shifted > .ba-sidebar {
+        transform: translateX(0);
+    }
+
+    .ba-sidebar-mobile-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 0.5rem;
+        margin-block-end: 0.65rem;
+        padding: 0 0.3rem;
+    }
+
+    .ba-sidebar-backdrop {
+        position: fixed;
+        inset: var(--ba-topbar-height) 0 0;
+        z-index: 1040;
+        background: rgb(7 15 25 / 0.5);
+        backdrop-filter: blur(2px);
+    }
+
+    .ba-sidebar-backdrop[hidden] {
+        display: none;
+    }
+
+    body.ba-sidebar-open {
+        overflow: hidden;
+    }
+
+    .content {
+        padding-inline: 0.9rem;
+    }
+
+    .ba-breadcrumb-nav {
+        padding-inline: 0.9rem;
+    }
+
+    .ba-login {
+        grid-template-columns: minmax(0, 1fr);
+        max-width: 30rem;
+        min-height: 0;
+        padding-block: 1rem 2rem;
+    }
+
+    .ba-login-brand {
+        padding: 1.4rem;
+    }
+
+    .ba-login-facts {
+        display: none;
+    }
+
+    .ba-login-brand h1 {
+        margin-block-start: 0.9rem;
+        font-size: 1.5rem;
+    }
+}
+
+@media (max-width: 767.98px) {
+    :root {
+        --ba-topbar-height: 58px;
+    }
+
+    .ba-topbar-inner {
+        gap: 0.5rem;
+        padding-inline: 0.75rem;
+    }
+
+    .ba-brand-subtitle {
+        display: none;
+    }
+
+    .ba-user-name {
+        display: none;
+    }
+
+    .ba-user-menu-button {
+        padding-inline: 0.25rem;
+    }
+
+    .ba-brand-title {
+        max-width: 11rem;
+        font-size: 0.9rem;
+    }
+
+    .ba-page-title {
+        font-size: 1.35rem;
+    }
+
+    .ba-content,
+    .content {
+        padding-block-start: 0.85rem;
+    }
+
+    .ba-toolbar,
+    .ba-actions {
+        padding: 0.55rem;
+    }
+
+    .ba-actions-selection {
+        width: 100%;
+        margin-inline-start: 0;
+    }
+
+    .ba-actions-fields {
+        width: 100%;
+    }
+
+    .ba-actions-fields .btn {
+        width: 100%;
+    }
+
+    .ba-actions select {
+        flex: 1 1 auto;
+        min-width: 0;
+    }
+
+    .ba-form-row {
+        padding: 0.75rem;
+    }
+
+    .ba-fieldset-heading,
+    .ba-inline-heading {
+        padding: 0.7rem 0.75rem;
+    }
+
+    .ba-submit-row {
+        flex-direction: column;
+        align-items: stretch;
+    }
+
+    .ba-submit-actions {
+        flex-direction: column;
+        align-items: stretch;
+    }
+
+    .ba-submit-actions .btn,
+    .ba-submit-danger .btn,
+    .ba-list-actions .btn {
+        width: 100%;
+        justify-content: center;
+    }
+
+    .ba-submit-danger {
+        margin-inline-start: 0;
+    }
+
+    .ba-pagination {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+
+    .ba-pagination-summary {
+        margin-inline-start: 0;
+    }
+
+    .ba-login-card .card-body {
+        padding: 1.25rem;
+    }
+
+    .selector {
+        flex-direction: column;
+    }
+
+    .selector-available,
+    .selector-chosen {
+        width: 100%;
+    }
+
+    .selector ul.selector-chooser {
+        width: 100%;
+        flex-direction: row;
+        justify-content: center;
+        margin-block: 0.35rem;
+        transform: none;
+    }
+
+    .selector-chooser li {
+        display: inline-flex;
+    }
+
+    .selector select {
+        height: 10rem;
+    }
+
+    .related-widget-wrapper {
+        flex-wrap: wrap;
+    }
+
+    .related-widget-wrapper > select,
+    .related-widget-wrapper > .select2-container {
+        flex-basis: 100%;
+    }
+}
+
+@media (max-width: 479.98px) {
+    .ba-brand-text {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        padding: 0;
+        overflow: hidden;
+        clip: rect(0, 0, 0, 0);
+        clip-path: inset(50%);
+        white-space: nowrap;
+    }
+
+    .ba-app-grid {
+        grid-template-columns: minmax(0, 1fr);
+    }
+
+    .ba-search-field {
+        flex-wrap: wrap;
+    }
+
+    .ba-search-icon {
+        inset-block-start: 1.18rem;
+        transform: translateY(-50%);
+    }
+
+    .ba-search-field .btn {
+        width: 100%;
+    }
+
+    .ba-filters-header {
+        align-items: flex-start;
+    }
+}
+
+@media (hover: none) {
+    .ba-model-actions,
+    .ba-nav-link {
+        opacity: 1;
+    }
+}
+
+/* Small secondary copy needs a stronger contrast than --bs-fg-4 provides. */
+.ba-page-subtitle,
+.ba-footer,
+.ba-action-label,
+.ba-nav-app-title,
+.ba-filter-list a,
+.ba-actions-selection,
+.ba-pagination-summary,
+.ba-date-hierarchy,
+.ba-search-count,
+.ba-search-help,
+.ba-timeline-meta,
+.ba-user-menu .menu-header,
+.help,
+.ba-help,
+.quiet,
+small.quiet {
+    color: var(--ba-text-muted);
+}
+
+@media print {
+    .ba-topbar,
+    .ba-breadcrumb-nav,
+    .ba-sidebar,
+    .ba-sidebar-backdrop,
+    .ba-footer,
+    .ba-filters,
+    .ba-object-tools,
+    .ba-actions,
+    .ba-submit-row,
+    .ba-search,
+    .ba-toolbar,
+    .ba-pagination {
+        display: none !important;
+    }
+
+    #main,
+    .content {
+        display: block;
+        max-width: none;
+        padding: 0;
+    }
+
+    .ba-fieldset,
+    .ba-inline-fieldset,
+    .ba-table-wrap,
+    .card {
+        border-color: #bbb;
+        box-shadow: none;
+    }
+}