active_admin_theme 3.1.0 → 3.2.0

data/app/assets/stylesheets/wigu/active_admin_theme.scss

@@ -55,6 +55,9 @@ $skinTitleBarBorderColor: $skinMainSecondColor!default;
 $skinTitleBarBorderWidth: 0!default;
 $skinTitleBarButtonPaddingY: 6px!default;          // action button vertical padding
 $skinTitleBarButtonPaddingX: 10px!default;          // action button horizontal padding
+// Minimum bar height — raise it alongside the button paddings above if your
+// buttons outgrow the default band (the bar still grows to fit its content).
+$skinTitleBarHeight: 37px!default;
 
 // Panel/section headers + tabs accent (the blue bar on panel headers and the
 // inactive tabs). $skinPanelHeaderColor is the base/light value;
@@ -130,7 +133,7 @@ $skinInactiveTabTextColor: #5e6469!default;
 $skinInactiveTabTextColorDark: #b0b8c2!default;
 // Index-table column header text, one colour for sortable and plain headers.
 $skinTableHeaderTextColor: $skinTextColor!default;
-$skinTableHeaderTextColorDark: #dde2e8!default;
+$skinTableHeaderTextColorDark: $skinTextColorDark!default;
 
 // Status tags. The label is the same on every filled tag in both modes. The
 // fills below are dark enough to carry a white one: every one of the five is
@@ -214,6 +217,20 @@ $skinStatusTagErrorColor: #ce483b!default;    // error / errored / red
   --aa-active-tab-text:   #{$skinActiveTabTextColor};
   --aa-inactive-tab-text: #{$skinInactiveTabTextColor};
   --aa-delete-link:   #{$skinDeleteLinkColor};
+
+  // Bridge for the companion active_admin_datetimepicker plugin: feed its
+  // --aa-datetimepicker-* inputs from this theme's palette, so the xdsoft picker
+  // is themed (light + dark) automatically with no per-app override. These point
+  // at the --aa-* vars, which are themselves redefined per mode, so a single set
+  // here covers both. Harmless no-op when the plugin isn't installed (nothing
+  // reads these). A host can still override any of them downstream.
+  --aa-datetimepicker-accent:     var(--aa-accent);
+  --aa-datetimepicker-surface:    var(--aa-surface);
+  --aa-datetimepicker-surface-2:  var(--aa-surface-2);
+  --aa-datetimepicker-text:       var(--aa-text);
+  --aa-datetimepicker-text-muted: var(--aa-text-muted);
+  --aa-datetimepicker-border:     var(--aa-border);
+  --aa-datetimepicker-hover:      var(--aa-surface-hover);
 }
 // OS preference, unless the user explicitly chose light
 @media (prefers-color-scheme: dark) {
@@ -233,13 +250,27 @@ html[data-theme="dark"]  { @include aa-dark-palette; }
   html[data-theme="dark"] { @content; }
 }
 
-// Иконки переключателя тем. Инлайном, потому что гем не возит картинок, и
-// маской, а не цветным SVG: маска красится currentColor и сама идёт за
-// $skinMenuTextColor. Половинка круга — auto, солнце — light, месяц — dark.
+// Sort markers. Three shapes rather than one at two opacities: ActiveAdmin's
+// sprite draws a double arrow for sortable-but-unsorted, and reusing the
+// descending triangle for it leaves the two states indistinguishable on a
+// freshly loaded index. Masked, like the theme switch icons, so they take
+// currentColor and follow the heading into dark mode.
+$sort-icon-none: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 12'%3E%3Cpath d='M4.5 0 9 5H0z'/%3E%3Cpath d='M4.5 12 0 7h9z'/%3E%3C/svg%3E")!default;
+$sort-icon-asc: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 12'%3E%3Cpath d='M4.5 2 9 8H0z'/%3E%3C/svg%3E")!default;
+$sort-icon-desc: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 12'%3E%3Cpath d='M4.5 10 0 4h9z'/%3E%3C/svg%3E")!default;
+
+// Theme switch icons. Inline, because the gem ships no image files, and as a
+// mask rather than a coloured SVG: a mask takes currentColor and so follows
+// $skinMenuTextColor on its own. Half circle = auto, sun = light, moon = dark.
 $theme-icon-auto: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6.6' fill='none' stroke='black' stroke-width='1.4'/%3E%3Cpath d='M8 2.6a5.4 5.4 0 0 1 0 10.8z'/%3E%3C/svg%3E")!default;
 $theme-icon-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round'%3E%3Ccircle cx='8' cy='8' r='3.1'/%3E%3Cpath d='M8 .9v1.8M8 13.3v1.8M.9 8h1.8M13.3 8h1.8M2.9 2.9l1.3 1.3M11.8 11.8l1.3 1.3M13.1 2.9l-1.3 1.3M4.2 11.8l-1.3 1.3'/%3E%3C/svg%3E")!default;
 $theme-icon-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13.4 9.6A5.9 5.9 0 0 1 6.4 2.6a5.9 5.9 0 1 0 7 7z'/%3E%3C/svg%3E")!default;
 
+// Logout drawn as a sign-out glyph instead of the word "Logout", so it matches
+// the icon toggle beside it. Masked like the theme icons above, so it takes
+// currentColor and follows $skinMenuTextColor; a consumer can override the var.
+$logout-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 2.5H3.2v11h3.3'/%3E%3Cpath d='M12.8 8H6'/%3E%3Cpath d='M9.5 5 12.8 8l-3.3 3'/%3E%3C/svg%3E")!default;
+
 // A wrong-typed override is legal SassScript, so it compiles without a word and
 // emits CSS the browser drops — `border-bottom: none solid #5ea3d3`,
 // `padding: 10 12px`. The rule silently vanishes and ActiveAdmin's own value
@@ -337,11 +368,11 @@ $theme-icon-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/s
     @error "$#{$name} must be a color or a CSS custom property (e.g. var(--aa-page-bg)), got `#{$value}`.";
   }
 }
-// Радиус внутреннего угла ячейки — на 1px меньше внешнего, чтобы не торчал
-// из-под рамки таблицы. Вычитать px напрямую нельзя: $skinBorderRadius задаёт
-// проект, и 0.25rem роняет всю компиляцию с «Incompatible units». calc()
-// откладывает вычитание до браузера, а безразмерный 0 обрабатываем отдельно —
-// calc(0 - 1px) невалиден.
+// A cell's inner corner is 1px tighter than the outer one, so it does not
+// show from under the table border. Subtracting px directly will not do: the
+// radius is a project's to set, and 0.25rem fails the whole compile with
+// "Incompatible units". calc() defers the subtraction to the browser, and a
+// unitless 0 is handled separately because calc(0 - 1px) is invalid.
 @function inner-radius($radius) {
   @if unitless($radius) { @return 0; }
   @return calc(#{$radius} - 1px);
@@ -352,10 +383,35 @@ $theme-icon-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/s
 html {
   background: var(--aa-page-bg);
 }
+
+// Pin a bar (#header, #title_bar) to the viewport's left edge at the visible
+// viewport width while a wide index table scrolls the whole page sideways
+// (#wrapper is display:table, min-width:100%). width = 100vw minus the vertical
+// scrollbar — the JS-set --scrollbar-width var (0 when wigu/scrollbar_width is
+// absent, and then max-width:100% keeps 100vw's scrollbar allowance from adding a
+// stray horizontal scrollbar). It's a plain max-width, not min(…, 100%):
+// sassc/libsass evaluates the Sass min() function and rejects calc() as a
+// non-number. No `top`, so the bar still scrolls vertically.
+@mixin viewport-pinned-bar {
+  position: sticky;
+  left: 0;
+  width: calc(100vw - var(--scrollbar-width, 0px));
+  max-width: 100%;
+  box-sizing: border-box;
+}
+
 body.active_admin {
   background: var(--aa-page-bg);
 }
 #wrapper {
+  // ActiveAdmin lays #wrapper out as `display: table`, which sizes to its
+  // content: a wide index table therefore scrolls the WHOLE page horizontally
+  // (the master / pre-theme behaviour admins are used to). Only guarantee the
+  // layout fills the viewport when the content is narrow. The utility nav
+  // (clock / theme toggle / logout) is pinned `sticky` (see #utility_nav below)
+  // so it stays reachable while the page scrolls sideways.
+  min-width: 100%;
+
   div.tabs {
     > ul > li > a {
       background-image: none;
@@ -418,6 +474,12 @@ body.active_admin {
     border: none;
     text-shadow: none;
     background-image: none;
+
+    // A wide index table scrolls the WHOLE page sideways. Pin the header on
+    // screen at the viewport width so it doesn't stretch to the table's width
+    // (which spread the menu out under the utility nav and overlapped it); it
+    // still grows to fit a wrapped menu, ActiveAdmin's natural layout.
+    @include viewport-pinned-bar;
     h1.site_title {
       color: $skinMainSecondColor;
       font-size: 16px;
@@ -448,10 +510,34 @@ body.active_admin {
     // tabs: drop the pill padding, and on hover highlight by text colour only — no
     // background block. The clock has no click action, so it gets no hover at all.
     #utility_nav {
+      // Sits at the top-right of the header; the header itself is pinned on screen
+      // (sticky, see #header above) so the clock / theme toggle / logout stay
+      // reachable while a wide table scrolls the page sideways.
+      z-index: 2;
+      white-space: nowrap;
+
       > li > a { padding: 0 5px; }
       > li:hover > a, > li.current > a { background-color: transparent; }
       > li#servertime:hover > a { color: #ffffff; }
 
+      // Server clock (server_clock.js), rendered as two compact lines like
+      // yeti-web: time + timezone (larger) over year/month/day (smaller). A
+      // right-aligned flex column sized to the nav band (~24px) so both lines
+      // fit the header height unchanged. Monospace + tabular figures keep the
+      // ticking time a constant width, so the adjacent logout doesn't jitter.
+      > li#servertime > span {
+        display: inline-flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: flex-end;
+        vertical-align: middle;
+        height: 24px;
+        font-family: 'SFMono-Regular', Menlo, Consolas, 'Liberation Mono', monospace;
+        font-variant-numeric: tabular-nums;
+      }
+      > li#servertime .clock-time { font-size: 12px; line-height: 1.1; }
+      > li#servertime .clock-date { font-size: 9px;  line-height: 1.1; }
+
       // The theme switch (app/assets/javascripts/wigu/theme_toggle.js). The
       // script only writes data-mode; the glyph is drawn here, so a project can
       // swap it for its own icon font without forking the script. Masked rather
@@ -488,6 +574,35 @@ body.active_admin {
         -webkit-mask-image: $theme-icon-dark;
         mask-image: $theme-icon-dark;
       }
+
+      // Logout as an icon ($logout-icon), to match the toggle beside it.
+      // font-size:0 hides the "Logout" text visually; the accessible name is
+      // the aria-label the gem's Ruby puts on the anchor, because zero-sized
+      // text is pruned from the accessibility tree by some screen readers
+      // (the toggle gets its aria-label from theme_toggle.js the same way).
+      // The masked glyph follows the bar's text colour. The real logout
+      // link/method from add_logout_button_to_menu is untouched.
+      // Scoped to a.wigu-logout — the class the gem's Ruby puts on the item
+      // it adds — so a consumer-rendered logout keeps its own label instead
+      // of collapsing to an unlabeled glyph.
+      > li#logout:has(> a.wigu-logout) { display: inline-flex; align-items: center; vertical-align: middle; }
+      > li#logout > a.wigu-logout {
+        display: flex;
+        align-items: center;
+        font-size: 0;
+        opacity: 0.75;
+
+        &:before {
+          content: "";
+          display: block;
+          width: 16px;
+          height: 16px;
+          background-color: currentColor;
+          -webkit-mask: #{$logout-icon} center / contain no-repeat;
+          mask: #{$logout-icon} center / contain no-repeat;
+        }
+        &:hover, &:focus { opacity: 1; }
+      }
     }
     ul.tabs {
       li.has_nested {
@@ -557,26 +672,87 @@ body.active_admin {
     background-color: $skinTitleBarColor;
     border: none;
     border-bottom: $skinTitleBarBorderWidth solid $skinTitleBarBorderColor;
+    // Pin the whole bar to the viewport like #header, so the title AND the action
+    // buttons stay visible while a wide index table scrolls the page sideways.
+    @include viewport-pinned-bar;
+    // Lay the title (left) and action items (right) on one compact row. Without
+    // this, resetting #titlebar_right to static (below) stacks it under the
+    // title and the bar grows tall. min-height, NOT height: with a fixed height
+    // the bar cannot contain its content — action items that wrap on a narrow
+    // window would overflow it and paint over the page — while min-height still
+    // makes breadcrumb (detail) pages match plain index pages. Drop the base
+    // clearfix — in a flex container it becomes a stray third item that
+    // space-between strands right.
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    min-height: $skinTitleBarHeight;
+    &::after { display: none; }
     #titlebar_left {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      height: auto;
+      // Let the title shrink below its min-content width: flex items refuse to
+      // otherwise, and a long nowrap record title would push the action items
+      // out of the pinned bar — unreachable past the viewport on wide pages.
+      min-width: 0;
       span.breadcrumb {
         font-size: 12px;
         text-shadow: none;
-        margin-bottom: 8px;
+        margin-bottom: 0;
         a, span {
-          color: lighten( $skinMainFirstColor, 30% )!important; ;
+          color: lighten( $skinMainFirstColor, 30% )!important;
         }
       }
+      // Own a sensible title size so consumer apps don't each shrink AA's large
+      // default (which towered over the breadcrumb). margin:0 + the flex parent
+      // centre it on the breadcrumb's line; nowrap + ellipsis keep a long
+      // record title (show pages) on one line without pushing the action
+      // items out of the bar — min-width: 0 lets it actually shrink.
       h2 {
         color: #ffffff;
         text-shadow: none;
+        font-size: 16px;
+        margin: 0;
+        min-width: 0;
+        // Screen only: AA registers the stylesheet with media "all", and paper
+        // has no horizontal scroll — a nowrap/ellipsis title would print
+        // truncated at the page edge where it used to wrap.
+        @media screen {
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
       }
     }
     #titlebar_right {
+      // Horizontal pinning is handled by #title_bar (sticky + viewport width),
+      // so the action items just sit at the right of the bar. Reset any
+      // consumer `position: absolute/sticky` (each app used to pin the buttons
+      // itself via local stylesheet overrides).
+      position: static;
+      // Shrink to the action-items height (some apps/base leave it ~50px, taller
+      // than the 37px bar, so centering pushed it over the top edge).
+      height: auto;
+      // Space multiple action items apart (e.g. a Menu dropdown next to a New
+      // button); the base leaves them flush on this side.
+      .action_items > .action_item:not(:last-child):not(:empty) { margin-right: 10px; }
+      // The form selectors cover button_to action items: Rails renders them as
+      // form > input[type=submit] (or button), which the anchor selectors
+      // miss — consumer apps were re-hardcoding the 6px/10px padding to
+      // compensate, desyncing from the $skin* knobs on every change.
       // `> a` and `> .dropdown_menu > a`: an action item may hold a dropdown, and
       // a descendant selector here paints its menu entries with the button fill
       // too — with !important, so the entry rules below cannot undo it.
+      // A button_to action item renders as a block <form>; inline-block
+      // keeps it on the bar's single row (consumers used to float it, which
+      // collapsed the flex bar's height instead).
+      .action_item > form { display: inline-block; }
       .action_item > a,
-      .action_item > .dropdown_menu > a {
+      .action_item > .dropdown_menu > a,
+      .action_item > form > input[type="submit"],
+      .action_item > form > button {
         background-image: none;
         border: none;
         box-shadow: none;
@@ -592,7 +768,28 @@ body.active_admin {
         }
       }
       div.dropdown_menu {
+        // Containing block for the panel below, so `right: 0` means "the
+        // trigger's right edge". AA leaves this element unpositioned, which
+        // makes the panel resolve against #title_bar (sticky) and park at the
+        // bar's far right no matter which action item was clicked. inline-block
+        // over AA's `display: inline`: an inline box's containing block spans
+        // its text fragments, so the markup's whitespace around the button
+        // pushed the panel a few px past the button's edge.
+        position: relative;
+        display: inline-block;
         div.dropdown_menu_list_wrapper {
+          // Always right-align title-bar dropdowns under their own button,
+          // overriding AA's inline positioning. AA 3.x's _position() sets
+          // inline `left` OR `right` per open depending on a window-geometry
+          // branch and never clears the other, and the wrapper persists across
+          // opens — after a resize between opens both offsets accumulate and
+          // the width:auto wrapper stretches from the stale left coordinate to
+          // the right edge. Its `right` branch is wrong here anyway: it offsets
+          // from the window, not from the bar. Consumer apps used to carry
+          // exactly this pair as a local hotfix; the theme owns the bar now, so
+          // it owns the guard.
+          left: auto !important;
+          right: 0 !important;
           background-color: var(--aa-elevated);
           border: 1px solid var(--aa-border);
           background-image: none;
@@ -603,6 +800,12 @@ body.active_admin {
           // that is invisible whenever the panel fill is close to the page —
           // which is exactly what a light surface is. Outline it like the panel.
           div.dropdown_menu_nipple {
+            // The panel is pinned right (above) while AA still offsets the
+            // arrow from the panel's LEFT edge by the button's centre, which
+            // lands it on empty bar. Pin it right too, centred on the button's
+            // own caret (AA draws that 6px wide at right: 12px).
+            left: auto !important;
+            right: 9px !important;
             border-color: var(--aa-border) transparent;
             &:before, &:after { border-color: var(--aa-elevated) transparent; }
           }
@@ -630,6 +833,12 @@ body.active_admin {
     }
   }
   .flashes {
+    // Pin like #header/#title_bar: this is the one full-width bar between the
+    // two pinned ones, and on a wide page scrolled right its left-aligned text
+    // would leave the viewport, leaving an unreadable colored stripe. AA puts
+    // all padding/background on the inner .flash, so the always-rendered empty
+    // wrapper stays zero-height and inert on flash-less pages.
+    @include viewport-pinned-bar;
     .flash {
       color: #ffffff;
       background-image: none;
@@ -905,27 +1114,27 @@ body.active_admin {
     // link keeps its full width so the whole cell stays clickable, and the
     // marker takes currentColor — the stock sprite is a fixed grey PNG that
     // cannot follow the text into dark mode.
-    // `a[href*="order="]`, not every anchor in the header: an application can
-    // put its own link in there — yeti-web adds a persistent-sort toggle — and
-    // it would otherwise get a sort marker of its own. ActiveAdmin's heading
-    // link always carries the order parameter.
-    th.sortable > a[href*="order="] {
+    // The sprite goes from every anchor in a sortable heading, because
+    // ActiveAdmin sets it on every one — an application link in there would
+    // otherwise keep the low-res PNG and the 13px indent it needs.
+    th.sortable a {
       padding-left: 0;
       background-image: none;
+    }
+    // The marker, though, only on ActiveAdmin's own heading link, which always
+    // carries the order parameter: an application's link is its own business.
+    th.sortable > a[href*="order="] {
 
       &:after {
         content: "";
         display: inline-block;
+        width: 9px;
+        height: 12px;
         margin-left: 6px;
         vertical-align: middle;
-        // The unused side has no width rather than a transparent one, so the
-        // box is exactly as tall as the triangle in it. Keeping all four sides
-        // and nudging with a margin instead puts the two states at different
-        // heights, because `vertical-align: middle` centres the box and the
-        // visible half then sits off-centre within it.
-        border: 4px solid transparent;
-        border-bottom-width: 0;
-        border-top-color: currentColor;
+        background-color: currentColor;
+        -webkit-mask: #{$sort-icon-none} center / contain no-repeat;
+        mask: #{$sort-icon-none} center / contain no-repeat;
         // 0.6, not lower: the marker is the only thing separating a sortable
         // heading from a plain one, so WCAG 1.4.11 asks 3:1 of it. Against the
         // header fill it gives 3.40 light and 4.22 dark; at 0.4 it was 2.13
@@ -934,13 +1143,15 @@ body.active_admin {
       }
     }
     th.sorted-asc > a[href*="order="]:after {
-      border-top-width: 0;
-      border-bottom-width: 4px;
-      border-top-color: transparent;
-      border-bottom-color: currentColor;
+      -webkit-mask-image: $sort-icon-asc;
+      mask-image: $sort-icon-asc;
+      opacity: 1;
+    }
+    th.sorted-desc > a[href*="order="]:after {
+      -webkit-mask-image: $sort-icon-desc;
+      mask-image: $sort-icon-desc;
       opacity: 1;
     }
-    th.sorted-desc > a[href*="order="]:after { opacity: 1; }
     // Right edge = a single 1px line on the last-column cells (header th, body
     // td, footer cells) coloured like the table border, since the table itself
     // no longer draws a right border.
@@ -1205,6 +1416,38 @@ table.index_table thead th a {
   color: var(--aa-table-header-text) !important;
 }
 
+// Sticky table headers: keep the column labels visible while a long index table
+// scrolls vertically. The header/title bar pin only horizontally (no `top`), so
+// they scroll away on vertical scroll and this thead pins to the viewport top —
+// no overlap. Scoped to .paginated_collection so it only hits real AA index
+// listings, not custom report/dashboard tables.
+//
+// Opting out: AA 3.x hardcodes the index table's class attribute and ignores
+// `index class:` options, so .skip-sticky-headers is reachable only on tables
+// whose markup you render yourself. For real AA listings, opt out app-wide
+// with one CSS line in your own stylesheet:
+//   .paginated_collection table.index_table thead tr th { position: static; }
+// Opt a hand-built table IN with .with-sticky-headers.
+// tr:first-child only: with a multi-row thead (group header over column
+// header) every row would stick at the same offset and paint over each other —
+// per-row offsets need measurements CSS alone can't express. The first row
+// pins; any further header rows scroll away normally.
+.paginated_collection table.index_table:not(.skip-sticky-headers) thead tr:first-child th,
+table.with-sticky-headers thead tr:first-child th {
+  position: sticky;
+  top: -1px;
+  z-index: 98;
+}
+// Square the corner cells of sticky theads: their inner-radius top corners are
+// transparent, so once the header detaches from the table's rounded border the
+// rows scrolling beneath flicker through the ~3px notches. At rest the square
+// background overpaints the border's rounding by the same ~3px — the lesser,
+// static artifact (CSS cannot tell "stuck" from "at rest").
+.paginated_collection table.index_table:not(.skip-sticky-headers) thead tr:first-child th:first-child,
+table.with-sticky-headers thead tr:first-child th:first-child { border-top-left-radius: 0; }
+.paginated_collection table.index_table:not(.skip-sticky-headers) thead tr:first-child th:last-child,
+table.with-sticky-headers thead tr:first-child th:last-child { border-top-right-radius: 0; }
+
 // Form section header: a <legend> interrupts the fieldset's top border, so the
 // header bar has no border around it (unlike a panel header). Float the legend
 // so it flows as a normal block and the fieldset border wraps around it.
@@ -1349,7 +1592,47 @@ form fieldset > ol > li fieldset ol li {
   border-color: var(--aa-border);
 }
 .dropdown_menu .dropdown_menu_list_wrapper .dropdown_menu_list li {
-  border-bottom-color: var(--aa-border);
+  // Was repainted to --aa-border, but a hairline under every row makes the
+  // flyout read as a table of cells rather than a menu. Drop it — the hover
+  // highlight is enough separation. (Same depth as the base rule, later wins.)
+  border-bottom: none;
+}
+
+// Dropdown-button caret. ActiveAdmin draws it with two stacked triangles on the
+// button: :before is a #FFF "shadow", :after the #777 arrow — both hard-coded.
+// On the themed blue title-bar action button and on the dark elevated
+// table-tools buttons the #777 arrow is ~invisible. Recolor it to the button's
+// own text colour and hide the light shadow into the fill.
+#titlebar_right .dropdown_menu .dropdown_menu_button {
+  &:before { border-top-color: var(--aa-button); }
+  &:after  { border-top-color: var(--aa-button-text); }
+}
+.table_tools .dropdown_menu .dropdown_menu_button,
+.batch_actions_selector .dropdown_menu_button {
+  &:before { border-top-color: var(--aa-elevated); }
+  &:after  { border-top-color: var(--aa-text); }
+}
+
+// Disabled form controls. The theme recolors inputs/selects via --aa-*, but a
+// disabled one looked identical to an enabled one (especially in dark). Mute
+// the fill, text and cursor so "disabled" reads in both modes. select2 sets its
+// control bg with !important, so the disabled override needs it too.
+#active_admin_content {
+  input:disabled, textarea:disabled, select:disabled {
+    background-color: var(--aa-surface-2) !important;
+    color: var(--aa-text-muted) !important;
+    opacity: 0.6;
+    cursor: not-allowed !important;
+  }
+}
+// Both container classes (--default --disabled) so this out-specifies the
+// enabled control rule's `--default` fill (which is !important) regardless of
+// source order.
+.select2-container--default.select2-container--disabled .select2-selection {
+  background-color: var(--aa-surface-2) !important;
+  opacity: 0.6;
+  cursor: not-allowed !important;
+  .select2-selection__rendered { color: var(--aa-text-muted) !important; }
 }
 
 .ui-dialog {
@@ -1359,6 +1642,11 @@ form fieldset > ol > li fieldset ol li {
   background-color: var(--aa-surface);
   color: var(--aa-text);
   border-bottom: 1px solid var(--aa-border);
+  // jQuery-UI's default `minHeight: 150` option is applied inline to the content
+  // box (min-height:~54px), so a one-line confirm leaves a big empty area
+  // between the message and the buttons. Let the content size to its text
+  // (the inline min-height needs !important to beat).
+  .ui-dialog-content { min-height: 0 !important; }
   .ui-dialog-titlebar {
     background-image: none;
     box-shadow: none;
@@ -1454,6 +1742,28 @@ form.filter_form .filter_form_field.filter_date_range .seperator {
   width: 10px;
 }
 
+// Date-only range filters (jQuery-UI datepicker, input.datepicker) get no width
+// from the base, so the two inputs fall back to their size="12" intrinsic width
+// and line up side by side only by luck; the label's float:right "Set range"
+// link then leaks into the input band on a longer label and bumps the "To"
+// input onto a second line. Lay the field out with flexbox: the label takes a
+// full row, the two inputs share the next, immune to the float.
+form.filter_form .filter_form_field.filter_date_range {
+  display: flex;
+  flex-wrap: wrap;
+
+  > label { flex: 0 0 100%; }
+
+  input.datepicker {
+    box-sizing: border-box;
+    flex: 1 1 0;
+    min-width: 0;
+    margin: 0;
+
+    & + input.datepicker { margin-left: 6px; }
+  }
+}
+
 //filter select box border radius
 .filter_form_field select {
   border-radius: 3px;
@@ -1538,8 +1848,10 @@ input[type='radio'] {
     // the seven :not()s are worth seven class-level points, and that beat every
     // component rule declared later — pagination links and the Clear Filters
     // button came out --aa-link instead of --aa-text.
-    a:where(:not(.button):not(.action_item):not(.table_tools_button):not(.dropdown_menu_button):not(.ui-tabs-anchor):not(.delete_link):not([data-method="delete"])) { color: var(--aa-link); }
-    a[data-method="delete"], a.delete_link { color: var(--aa-delete-link); }
+    a:where(:not(.button):not(.action_item):not(.table_tools_button):not(.dropdown_menu_button):not(.ui-tabs-anchor):not(.delete_link):not(.delete-link):not([data-method="delete"])) { color: var(--aa-link); }
+    // `.delete-link` (hyphen) as well as AA's own `.delete_link`: some apps name
+    // their soft-delete links with the hyphen.
+    a[data-method="delete"], a.delete_link, a.delete-link { color: var(--aa-delete-link); }
 
     // Pagination — non-current page chips use a light-grey bg in the theme
     .pagination span > a { background-color: var(--aa-surface-2); color: var(--aa-text); }
@@ -1549,7 +1861,10 @@ input[type='radio'] {
     // cannot be out-specified by anything sane here, which is why this needs
     // !important, like the accent fill one line over in the base pagination
     // block. Without it the digit renders at 1.00:1 on its own background.
-    .pagination span > a:hover { color: $skinMenuPillTextColor !important; }
+    // The hover fill is the accent ($skinMainSecondColor); $skinMenuPillTextColor
+    // is a light blue that sits on it at ~1.16:1 (invisible). White reads on the
+    // accent (matches the base pagination block's own hover colour one file over).
+    .pagination span > a:hover { color: #fff !important; }
 
     // Batch-actions / table-tools dropdown menu items are white by default
     .table_tools .dropdown_menu_list li a {
@@ -1621,12 +1936,25 @@ input[type='radio'] {
     table.index_table tbody tr:nth-child(even) > td,
     table.index_table tbody tr.even > td { background: var(--aa-surface-2); }
     table.index_table tbody tr:hover > td { background: var(--aa-surface-hover); }
-    // Checked rows: the zebra and hover rules above outrank ActiveAdmin's own
-    // `tr.selected td`, so without this a ticked row looks exactly like an
-    // unticked one. The :hover variant keeps the selection visible while the
-    // pointer is over the row.
+    // Selected cells: the zebra and hover rules above outrank ActiveAdmin's own
+    // `tr.selected td` / `td.selected`, so without this a ticked row (batch
+    // actions) or a click-highlighted row + column (crisscross) looks unselected.
+    // The `tr >` in the td.selected selector is load-bearing: the even-stripe
+    // rule is `...tbody tr:nth-child(even) > td` (specificity 0,0,2,4); a plain
+    // `tbody td.selected` is only (0,0,2,3) and loses on even rows, breaking the
+    // cross every other row. Matching the `tr >` ties the specificity, so source
+    // order wins. The :hover variants keep the selection visible under the pointer.
     table.index_table tbody tr.selected > td,
-    table.index_table tbody tr.selected:hover > td { background: var(--aa-selected); }
+    table.index_table tbody tr.selected:hover > td,
+    table.index_table tbody tr > td.selected,
+    table.index_table tbody tr:hover > td.selected { background: var(--aa-selected); }
+    // The clicked cell sits at the centre of the cross; an accent outline marks
+    // it apart from the row/column tint without a competing fill (outset inward
+    // so it adds no layout shift).
+    table.index_table tbody tr > td.selected-cell {
+      outline: 2px solid var(--aa-accent);
+      outline-offset: -2px;
+    }
     // Plain content tables (e.g. the CDR show "Attempts" table) are striped by the
     // base CSS with light fills; map the odd/even rows onto the dark surfaces too.
     table tbody tr.odd > td,  table tbody tr.odd > th  { background-color: var(--aa-surface); }
@@ -1643,11 +1971,23 @@ input[type='radio'] {
       color: var(--aa-text);
     }
 
+    // Give the content column its own block-formatting context so #index_footer's
+    // `clear: both` (below) only clears the pagination floats INSIDE the table
+    // area — not the floated #sidebar. Without this, a tall filter sidebar pushes
+    // the pagination far below a short table (it clears the sidebar's float too).
+    #main_content { display: flow-root; }
+
     // Index footer (per-page selector, pagination, "displaying…" info, download
     // links): lay them out in one left-packed, vertically-centred row. The gem
     // floats them, so they sat top-aligned and, having different heights, looked
     // misaligned. A slightly larger font than the gem default (0.85em) too.
     #index_footer {
+      // ActiveAdmin floats .pagination_top and .paginated_collection_contents
+      // left; the footer has no clear, so it rode up beside them and rendered
+      // ABOVE the table (per-page + page numbers + "Displaying…" duplicated on
+      // top, nothing below). Clear the floats so it sits under the table — one
+      // pagination on top, one on the bottom, like master.
+      clear: both;
       text-align: left;
       font-size: 0.95em;
       .pagination_per_page,
@@ -1700,6 +2040,83 @@ input[type='radio'] {
     table.ui-datepicker-calendar tbody td span { color: var(--aa-text-muted); }
     .ui-state-hover, .ui-state-active { background: var(--aa-surface-hover); }
   }
+
+  // select2 (used by most ActiveAdmin apps). It ships its own light chrome and
+  // appends the dropdown to <body>, so it is styled here at the mixin level
+  // like the datepicker. Drive the control, the dropdown panel, the results
+  // list and the search field from the --aa-* tokens so it follows both modes;
+  // without this the dropdown stays a white panel with white/near-invisible
+  // text in dark mode. !important is required because select2's own stylesheet
+  // sets these to white with equal specificity and loads after this in the
+  // bundle — same reason the datetime picker overrides use it.
+  .select2-container--default {
+    .select2-selection--single,
+    .select2-selection--multiple {
+      background-color: var(--aa-input-bg) !important;
+      border-color: var(--aa-input-border) !important;
+      color: var(--aa-text);
+    }
+    .select2-selection__rendered { color: var(--aa-text) !important; }
+    .select2-selection__placeholder { color: var(--aa-text-muted) !important; }
+    // Clear "×": keep it a small, muted inline glyph that brightens on hover.
+    // select2 4.1 renders it as a <button> that takes a large square hover fill
+    // (the "big blue square"); neutralize that and the 4.0 span the same way so
+    // the affordance is just the colour change, correctly aligned.
+    .select2-selection__clear {
+      color: var(--aa-text-muted) !important;
+      background: transparent !important;
+      border: none !important;
+      box-shadow: none !important;
+      padding: 0 4px !important;
+      &:hover, &:focus { color: var(--aa-text) !important; background: transparent !important; }
+    }
+    .select2-selection--multiple .select2-selection__choice {
+      background-color: var(--aa-surface-2) !important;
+      border-color: var(--aa-border) !important;
+      color: var(--aa-text) !important;
+    }
+    .select2-search__field { color: var(--aa-text) !important; }
+  }
+  .select2-dropdown {
+    background-color: var(--aa-surface) !important;
+    border-color: var(--aa-border) !important;
+    color: var(--aa-text);
+  }
+  .select2-results__option { color: var(--aa-text) !important; }
+  .select2-results__option--highlighted[aria-selected] {
+    background-color: var(--aa-surface-hover) !important;
+    color: var(--aa-text) !important;
+  }
+  .select2-results__option[aria-selected="true"] {
+    background-color: var(--aa-selected) !important;
+    color: var(--aa-text) !important;
+  }
+
+  // tom-select (used by e.g. yeti). Same situation as select2: its own light
+  // chrome, dropdown rendered in place; recolor from the --aa-* tokens.
+  .ts-wrapper {
+    .ts-control {
+      background: var(--aa-input-bg) !important;
+      border-color: var(--aa-input-border) !important;
+      color: var(--aa-text);
+      input, input::placeholder { color: var(--aa-text) !important; }
+      .item {
+        background: var(--aa-surface-2) !important;
+        border-color: var(--aa-border) !important;
+        color: var(--aa-text) !important;
+      }
+    }
+  }
+  .ts-dropdown {
+    background: var(--aa-surface) !important;
+    border-color: var(--aa-border) !important;
+    color: var(--aa-text);
+    .optgroup-header { background: var(--aa-surface-2) !important; color: var(--aa-text-muted) !important; }
+    .option { color: var(--aa-text) !important; }
+    .option.active,
+    .active { background: var(--aa-surface-hover) !important; color: var(--aa-text) !important; }
+    .option[aria-selected="true"] { background: var(--aa-selected) !important; color: var(--aa-text) !important; }
+  }
 }
 
 // DARK-ONLY content overrides — genuinely dark-specific values with no light
@@ -1718,3 +2135,58 @@ input[type='radio'] {
   html:not([data-theme="light"]) { @include aa-dark-content; }
 }
 html[data-theme="dark"] { @include aa-dark-content; }
+
+// Trix / ActionText editor. Trix ships with ActionText (a Rails built-in), so
+// its chrome is themed here for every consumer; the app still imports Trix's
+// own base CSS (trix/dist/trix). All rules key off the --aa-* tokens, so they
+// follow the active palette in both light and dark, and are inert when no
+// editor is on the page.
+trix-toolbar {
+  .trix-button-group { border-color: var(--aa-border); }
+  .trix-button {
+    background: var(--aa-surface);
+    color: var(--aa-text);
+    border-bottom-color: var(--aa-border);
+    &:not(:first-child) { border-left-color: var(--aa-border); }
+    &:not(:disabled):hover { background: var(--aa-surface-hover); }
+    &.trix-active { background: var(--aa-selected); }
+  }
+  // Trix dims idle icons to opacity 0.6 and disabled ones to 0.125 — both read
+  // as faint in either palette, the 0.125 so faint the block-format buttons
+  // (disabled until the editor is focused) look broken. Lift idle to 0.8 and
+  // disabled to 0.4: still clearly dimmer than idle, but legible. Trix keeps the
+  // active icon at 1 via a higher-specificity rule.
+  .trix-button--icon::before { opacity: 0.8; }
+  .trix-button--icon:disabled::before { opacity: 0.4; }
+}
+
+trix-editor {
+  background: var(--aa-input-bg);
+  border-color: var(--aa-input-border);
+  color: var(--aa-text);
+  &:empty:not(:focus)::before { color: var(--aa-text-muted); } // placeholder
+}
+
+.trix-content {
+  pre { background: var(--aa-surface-2); }
+  blockquote { border-left: 0.3em solid var(--aa-border); }
+}
+
+.trix-dialog {
+  background: var(--aa-surface);
+  color: var(--aa-text);
+  box-shadow: 0 2px 8px var(--aa-shadow);
+  input[type="text"], input[type="url"] {
+    background: var(--aa-input-bg);
+    border-color: var(--aa-input-border);
+    color: var(--aa-text);
+  }
+  .trix-button { background: var(--aa-accent); color: #fff; }
+}
+
+// Trix bakes its toolbar icons into the base CSS as black SVG background images
+// on ::before; invert them in dark mode so they read on the dark toolbar (the
+// idle/disabled opacity lift above applies in both modes).
+@include aa-dark {
+  trix-toolbar .trix-button--icon::before { filter: invert(1); }
+}