fuji_admin 0.1.0

data/app/assets/stylesheets/fuji_admin/components/_watchlist_bar.scss

@@ -0,0 +1,119 @@
+// Watchlist bar — rendered by omnia above show-page details for Company and
+// Person records. Shows current watchlist membership as removable pills plus
+// a primary "Add to Watchlist" button.
+
+.fuji-watchlist-bar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: $space-3;
+  padding: $space-3 $space-4;
+  margin-bottom: $space-5;
+  background-color: $surface-50;
+  border: 1px solid $surface-border;
+  border-radius: $border-radius;
+  font-size: $font-size-sm;
+
+  &__label {
+    display: inline-flex;
+    align-items: center;
+    font-size: $font-size-xs;
+    font-weight: $font-weight-semibold;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    color: $text-color-muted;
+    flex-shrink: 0;
+
+    &::after {
+      content: ":";
+      margin-left: 2px;
+    }
+  }
+
+  &__items {
+    display: inline-flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: $space-2;
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+
+  &__item {
+    display: inline-flex;
+    align-items: center;
+    gap: $space-1;
+    padding: $space-1 $space-2 $space-1 $space-3;
+    background-color: $primary-50;
+    border: 1px solid $primary-100;
+    border-radius: $radius-full;
+    color: $primary-700;
+    font-size: $font-size-xs;
+    font-weight: $font-weight-medium;
+    line-height: 1.4;
+  }
+
+  &__remove {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 18px;
+    height: 18px;
+    margin-left: $space-1;
+    padding: 0;
+    background-color: $primary-100;
+    color: $primary-700;
+    border-radius: $radius-full;
+    font-size: $font-size-sm;
+    font-weight: $font-weight-semibold;
+    line-height: 1;
+    text-decoration: none;
+    transition: background-color 0.15s ease, color 0.15s ease;
+
+    &:hover {
+      background-color: rgba($color-danger, 0.14);
+      color: $color-danger;
+      text-decoration: none;
+    }
+  }
+
+  &__empty {
+    color: $text-color-muted;
+    font-style: italic;
+  }
+
+  &__add {
+    display: inline-flex;
+    align-items: center;
+    gap: $space-1;
+    padding: $space-1 $space-3;
+    margin-left: auto;              // push to the right on wide layouts
+    background-color: $primary-color;
+    color: $primary-color-text;
+    border: 1px solid $primary-color;
+    border-radius: $border-radius;
+    font-size: $font-size-xs;
+    font-weight: $font-weight-semibold;
+    line-height: 1.6;
+    text-decoration: none;
+    transition: background-color 0.15s ease, border-color 0.15s ease;
+
+    &:hover {
+      background-color: $primary-700;
+      border-color: $primary-700;
+      color: $primary-color-text;
+      text-decoration: none;
+    }
+
+    &:focus-visible {
+      outline: none;
+      box-shadow: $shadow-focus;
+    }
+
+    &::before {
+      content: "+";
+      font-size: $font-size-sm;
+      font-weight: $font-weight-bold;
+    }
+  }
+}

data/app/assets/stylesheets/fuji_admin/layouts/_footer.scss

@@ -0,0 +1,21 @@
+// Footer — quiet attribution strip at the bottom of the viewport.
+
+#footer,
+.footer {
+  padding: $space-4 $content-padding-mobile;
+  color: $text-color-muted;
+  font-size: $font-size-sm;
+  text-align: center;
+
+  @include media-up(md) {
+    padding: $space-4 $content-padding;
+  }
+
+  a {
+    color: $text-color-secondary;
+
+    &:hover {
+      color: $primary-color;
+    }
+  }
+}

data/app/assets/stylesheets/fuji_admin/layouts/_header.scss

@@ -0,0 +1,80 @@
+// Top header bar — brand/title on the left, utility nav (user, logout) on
+// the right. Fixed so it stays visible while scrolling.
+
+body.active_admin.logged_in > .header,
+body.active_admin.logged_in #header {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 20;
+  height: $header-height-mobile;
+  background-color: $surface-0;
+  border-bottom: 1px solid $surface-border;
+  display: flex;
+  align-items: center;
+
+  @include media-up(md) {
+    height: $header-height;
+  }
+
+  // Site title / brand
+  h1.site_title,
+  .site_title {
+    margin: 0;
+    padding: 0 $space-4;
+    font-size: $font-size-lg;
+    font-weight: $font-weight-semibold;
+    line-height: 1;
+    color: $text-color;
+    display: flex;
+    align-items: center;
+    height: 100%;
+
+    @include media-up(lg) {
+      width: $sidebar-width;
+      padding: 0 $space-5;
+      border-right: 1px solid $surface-border;
+    }
+
+    a {
+      color: inherit;
+      text-decoration: none;
+    }
+
+    #site_title_image {
+      max-height: 32px;
+      width: auto;
+    }
+  }
+
+  // Utility nav (user menu, logout). AA also adds `.header-item` to the
+  // left-nav (#tabs), so we target the right-nav by its specific id only.
+  #utility_nav {
+    margin: 0 0 0 auto;
+    padding: 0 $space-4;
+    display: flex;
+    align-items: center;
+    list-style: none;
+    gap: $space-2;
+
+    li {
+      display: flex;
+      align-items: center;
+
+      a {
+        color: $text-color-secondary;
+        padding: $space-2 $space-3;
+        border-radius: $radius-md;
+        font-size: $font-size-sm;
+        transition: background-color 0.15s ease, color 0.15s ease;
+
+        &:hover {
+          background-color: $surface-100;
+          color: $text-color;
+          text-decoration: none;
+        }
+      }
+    }
+  }
+}

data/app/assets/stylesheets/fuji_admin/layouts/_layouts.scss

@@ -0,0 +1,7 @@
+// Aggregator. Order: sizes → wrapper → header → sidebar → main → footer.
+@import "sizes";
+@import "wrapper";
+@import "header";
+@import "sidebar";
+@import "main_content";
+@import "footer";

data/app/assets/stylesheets/fuji_admin/layouts/_main_content.scss

@@ -0,0 +1,118 @@
+// Main content area — the breathing room around the page, plus the title
+// bar (breadcrumb + page heading + action items) and the content card.
+
+#active_admin_content {
+  padding: $space-5 $content-padding-mobile $content-padding-mobile;
+
+  @include media-up(md) {
+    padding: $space-5 $content-padding $content-padding;
+  }
+
+  // Sidebar is repositioned as a right drawer (see components/_filter_drawer.scss),
+  // so `.with_sidebar` doesn't need an inline two-column layout.
+}
+
+// Edit / view / new pages benefit from maximising content width on narrow
+// screens — forms and attribute tables look better edge-to-edge. Index pages
+// keep their padded card so list tables sit in a clear container.
+body.show,
+body.edit,
+body.new {
+  @include media-down(md) {
+    #active_admin_content {
+      padding: $space-5 0 $space-4;
+    }
+  }
+}
+
+#title_bar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: $space-3;
+  padding: $space-5 $content-padding-mobile 0;
+  margin: 0;
+
+  @include media-up(md) {
+    padding: $space-6 $content-padding 0;
+  }
+
+  #titlebar_left {
+    display: flex;
+    flex-direction: column;
+    gap: $space-1;
+  }
+
+  .breadcrumb {
+    font-size: $font-size-sm;
+    color: $text-color-muted;
+
+    a {
+      color: $text-color-secondary;
+
+      &:hover {
+        color: $primary-color;
+      }
+    }
+  }
+
+  h2,
+  #page_title {
+    margin: 0;
+    font-size: $font-size-2xl;
+    font-weight: $font-weight-semibold;
+    color: $text-color;
+  }
+
+  #titlebar_right {
+    display: flex;
+    flex-wrap: wrap;
+    gap: $space-2;
+    align-items: center;
+
+    // `display: contents` lets action_items flatten into titlebar_right's flex
+    // flow. Without this, .action_items would wrap as one block beside Filters,
+    // and its own children would wrap *inside* that block — breaking the left
+    // alignment with the Filters button on a second row.
+    .action_items {
+      display: contents;
+    }
+
+    .action_item {
+      display: inline-flex;
+    }
+  }
+}
+
+#main_content_wrapper {
+  flex: 1 1 auto;
+  min-width: 0; // allow shrink below content width (prevents overflow)
+}
+
+#main_content {
+  background-color: $surface-0;
+  border-radius: $border-radius-card;
+  box-shadow: $shadow-sm;
+  padding: $space-4;
+
+  @include media-up(md) {
+    padding: $space-5;
+  }
+}
+
+// On edit / view / new pages, flatten the card at mobile sizes so the form
+// or attributes table reaches the viewport edges.
+body.show,
+body.edit,
+body.new {
+  @include media-down(md) {
+    #main_content {
+      padding: 0;
+      border-radius: 0;
+      box-shadow: none;
+    }
+  }
+}
+
+// #sidebar layout now lives in components/_filter_drawer.scss.

data/app/assets/stylesheets/fuji_admin/layouts/_sidebar.scss

@@ -0,0 +1,124 @@
+// Left sidebar — main navigation (ActiveAdmin renders as `#tabs` inside the
+// header). Fixed to the viewport at lg+, hidden below that breakpoint.
+// (Mobile drawer behaviour is a future enhancement.)
+
+body.active_admin.logged_in {
+  #tabs,
+  #header #tabs,
+  .header #tabs {
+    display: block;          // AA tags #tabs with `.header-item` which our
+    flex-direction: column;  // header rules would otherwise flex-row.
+    position: fixed;
+    top: $header-height-mobile;
+    left: -#{$sidebar-width};
+    bottom: 0;
+    width: $sidebar-width;
+    padding: $space-4 0;
+    background-color: $surface-0;
+    border-right: 1px solid $surface-border;
+    overflow-y: auto;
+    list-style: none;
+    margin: 0;
+    z-index: 16; // above backdrop (14) and content
+    transition: left 0.25s ease;
+
+    @include media-up(md) {
+      top: $header-height;
+    }
+
+    // Off-canvas drawer on mobile — slides in when body.fuji-menu-open.
+    &.tabs_open {
+      left: 0;
+      box-shadow: $shadow-lg;
+    }
+
+    @include media-up(lg) {
+      left: 0;
+      transition: none;
+      box-shadow: none;
+    }
+
+    > li {
+      display: block;
+      margin: 0;
+
+      > a {
+        display: flex;
+        align-items: center;
+        gap: $space-3;
+        padding: $space-3 $space-5;
+        color: $text-color-secondary;
+        font-size: $font-size-sm;
+        font-weight: $font-weight-medium;
+        border-left: 3px solid transparent;
+        transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
+
+        &:hover {
+          background-color: $surface-100;
+          color: $text-color;
+          text-decoration: none;
+        }
+      }
+
+      &.current > a {
+        color: $primary-color;
+        background-color: $primary-50;
+        border-left-color: $primary-color;
+      }
+
+      // Nested submenus — collapsed by default, expanded on .open or .current.
+      &.has_nested {
+        > a::after {
+          content: "";
+          display: inline-block;
+          margin-left: auto;
+          width: 0;
+          height: 0;
+          border-left: 4px solid transparent;
+          border-right: 4px solid transparent;
+          border-top: 5px solid currentColor;
+          transition: transform 0.2s ease;
+        }
+
+        &.open > a::after,
+        &.current > a::after {
+          transform: rotate(180deg);
+        }
+
+        > ul {
+          display: none;
+        }
+
+        &.open > ul,
+        &.current > ul {
+          display: block;
+        }
+      }
+
+      &.has_nested > ul {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+        background-color: $surface-50;
+
+        li a {
+          display: block;
+          padding: $space-2 $space-5 $space-2 $space-8;
+          color: $text-color-secondary;
+          font-size: $font-size-sm;
+
+          &:hover {
+            background-color: $surface-100;
+            color: $text-color;
+            text-decoration: none;
+          }
+        }
+
+        li.current a {
+          color: $primary-color;
+          font-weight: $font-weight-medium;
+        }
+      }
+    }
+  }
+}

data/app/assets/stylesheets/fuji_admin/layouts/_sizes.scss

@@ -0,0 +1,12 @@
+// Layout-specific sizes. Keep these here rather than in variables/ because
+// they describe the theme's chrome, not design tokens a consumer would
+// override from their app.
+
+$header-height:           64px;
+$header-height-mobile:    56px;
+
+$sidebar-width:           240px;   // wide, labeled (default)
+$sidebar-width-collapsed: 72px;    // future icon-only rail
+
+$content-padding:         $space-6;   // 24px — desktop
+$content-padding-mobile:  $space-3;   // 12px — tighter on phones so cards breathe

data/app/assets/stylesheets/fuji_admin/layouts/_wrapper.scss

@@ -0,0 +1,28 @@
+// Body + #wrapper. Offsets account for fixed header/sidebar so content
+// never flows under them.
+
+body.active_admin {
+  background-color: $body-background;
+}
+
+body.active_admin.logged_in {
+  padding-top: $header-height-mobile;
+
+  @include media-up(md) {
+    padding-top: $header-height;
+  }
+
+  @include media-up(lg) {
+    padding-left: $sidebar-width;
+  }
+}
+
+#wrapper {
+  display: flex;
+  flex-direction: column;
+  min-height: calc(100vh - #{$header-height-mobile});
+
+  @include media-up(md) {
+    min-height: calc(100vh - #{$header-height});
+  }
+}

data/app/assets/stylesheets/fuji_admin/mixins/_media.scss

@@ -0,0 +1,30 @@
+// Responsive media-query mixins keyed off the breakpoint map.
+// Usage:
+//   @include media-up(md)   { ... }   // min-width: 768px
+//   @include media-down(md) { ... }   // max-width: 767.98px
+//   @include media-between(sm, lg) { ... }
+
+@mixin media-up($name) {
+  $min: map-get($breakpoints, $name);
+  @if $min == null {
+    @error "Unknown breakpoint `#{$name}`.";
+  }
+  @media (min-width: $min) { @content; }
+}
+
+@mixin media-down($name) {
+  $max: map-get($breakpoints, $name);
+  @if $max == null {
+    @error "Unknown breakpoint `#{$name}`.";
+  }
+  @media (max-width: $max - 0.02px) { @content; }
+}
+
+@mixin media-between($lower, $upper) {
+  $min: map-get($breakpoints, $lower);
+  $max: map-get($breakpoints, $upper);
+  @if $min == null or $max == null {
+    @error "Unknown breakpoint(s) `#{$lower}` / `#{$upper}`.";
+  }
+  @media (min-width: $min) and (max-width: $max - 0.02px) { @content; }
+}

data/app/assets/stylesheets/fuji_admin/mixins/_mixins.scss

@@ -0,0 +1,2 @@
+// Aggregator.
+@import "media";

data/app/assets/stylesheets/fuji_admin/pages/_form.scss

@@ -0,0 +1,61 @@
+// Resource new/edit form page. Input styling comes from
+// components/_inputs.scss; this adds nested has_many blocks and a few
+// form-layout tweaks.
+
+form.formtastic {
+  fieldset.inputs + fieldset.inputs {
+    margin-top: $space-5;
+  }
+
+  // has_many nested forms (children of a parent record)
+  ol > li.has_many_container {
+    padding: 0;
+    margin-bottom: $space-4;
+
+    h3 {
+      margin: 0 0 $space-3;
+      font-size: $font-size-base;
+      font-weight: $font-weight-semibold;
+      color: $text-color-secondary;
+    }
+
+    fieldset.inputs {
+      background-color: $surface-50;
+      border-style: dashed;
+    }
+
+    .has_many_add {
+      @include fuji-button-secondary;
+      margin-top: $space-2;
+    }
+
+    .has_many_remove {
+      @include fuji-button-secondary;
+      color: $color-danger;
+      border-color: rgba($color-danger, 0.3);
+
+      &:hover {
+        background-color: rgba($color-danger, 0.08);
+        border-color: $color-danger;
+      }
+    }
+  }
+
+  // Fragment fieldsets (nested attribute sets inside a single field).
+  fieldset > ol > li fieldset.fragments {
+    padding: 0;
+    border: 0;
+    background: transparent;
+
+    ol {
+      display: flex;
+      flex-wrap: wrap;
+      gap: $space-3;
+
+      li {
+        flex: 1 1 auto;
+        padding: 0;
+      }
+    }
+  }
+}

data/app/assets/stylesheets/fuji_admin/pages/_index.scss

@@ -0,0 +1,77 @@
+// Resource index pages — .paginated_collection wraps the table + pagination
+// in a bordered card, nested inside #main_content. We drop the index_table's
+// own border/radius so only one ring is visible.
+
+// .paginated_collection is a structural wrapper only — `#main_content` is
+// the visual card, so adding a border here just creates a double-card
+// sandwich (noticeable on register_page index views that already contain
+// nested panels and bordered summary tables).
+.paginated_collection {
+  background-color: transparent;
+  border: 0;
+  border-radius: 0;
+  margin: 0;
+
+  table.index_table {
+    border: 0;
+    border-radius: 0;
+  }
+
+  .paginated_collection_contents {
+    overflow-x: auto;
+  }
+
+  .pagination_information,
+  .pagination {
+    padding: $space-3 0;
+  }
+
+  .pagination_information {
+    border-top: 1px solid $surface-200;
+  }
+}
+
+// Batch-actions checkbox column width.
+table.index_table tbody td.col-selectable {
+  width: 32px;
+  padding-right: 0;
+}
+
+// Download format links — rendered below the paginated table. Horizontal
+// padding is 0 now that .paginated_collection has no inner card (main_content
+// provides the gutter).
+.download_links {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: $space-2;
+  padding: $space-3 0 0;
+  border-top: 1px solid $surface-200;
+  margin-top: $space-3;
+  font-size: $font-size-xs;
+  color: $text-color-muted;
+
+  span {
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    font-weight: $font-weight-medium;
+  }
+
+  a {
+    display: inline-flex;
+    align-items: center;
+    padding: $space-1 $space-2;
+    color: $text-color-secondary;
+    background-color: $surface-100;
+    border-radius: $radius-sm;
+    font-weight: $font-weight-medium;
+    text-decoration: none;
+    transition: background-color 0.15s ease, color 0.15s ease;
+
+    &:hover {
+      background-color: $primary-50;
+      color: $primary-color;
+      text-decoration: none;
+    }
+  }
+}