openxiangda 1.0.264 → 2.0.0-alpha.2

package/dist/browser/styles.css

@@ -0,0 +1,1941 @@
+html,
+body,
+#root {
+  min-height: 100%;
+  margin: 0;
+  background: var(--oxa-shell-bg, #f5f5f5);
+}
+
+body {
+  color: var(--oxa-shell-text, #1f1f1f);
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+    "Helvetica Neue", Arial, "Noto Sans", "PingFang SC", "Microsoft YaHei",
+    sans-serif;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+.oxa-loading,
+.oxa-page-loading {
+  display: grid;
+  min-height: 60vh;
+  place-items: center;
+}
+
+.oxa-global-request-loading {
+  position: fixed;
+  z-index: 1300;
+  top: 0;
+  right: 0;
+  left: 0;
+  height: 2px;
+  overflow: hidden;
+  pointer-events: none;
+}
+
+.oxa-global-request-loading span {
+  position: absolute;
+  width: 38%;
+  height: 100%;
+  border-radius: 2px;
+  background: var(--oxa-shell-primary, #1677ff);
+  animation: oxa-request-progress 1.1s ease-in-out infinite;
+  box-shadow: 0 0 8px var(--oxa-shell-primary, #1677ff);
+}
+
+@keyframes oxa-request-progress {
+  from {
+    transform: translateX(-120%);
+  }
+
+  to {
+    transform: translateX(380%);
+  }
+}
+
+.oxa-app-layout {
+  min-height: 100vh;
+  background: var(--oxa-shell-bg, #f5f5f5);
+}
+
+.oxa-sider {
+  position: sticky !important;
+  top: 0;
+  z-index: 20;
+  height: 100vh;
+  border-right: 1px solid var(--oxa-shell-border, #f0f0f0);
+  background: var(--oxa-shell-surface, #fff) !important;
+  box-shadow: none;
+}
+
+.oxa-sider .ant-layout-sider-children {
+  display: flex;
+  flex-direction: column;
+  min-height: 100%;
+}
+
+.oxa-brand {
+  display: flex;
+  min-height: 64px;
+  align-items: center;
+  gap: 12px;
+  border-bottom: 1px solid var(--oxa-shell-border, #f0f0f0);
+  padding: 12px 18px;
+}
+
+.oxa-brand-mark {
+  position: relative;
+  width: 32px;
+  min-width: 32px;
+  height: 36px;
+}
+
+.oxa-brand-mark::before,
+.oxa-brand-mark::after {
+  position: absolute;
+  bottom: 2px;
+  width: 10px;
+  height: 34px;
+  border-radius: 3px 3px 1px 1px;
+  background: var(--oxa-shell-primary, #1677ff);
+  content: "";
+  transform-origin: bottom;
+}
+
+.oxa-brand-mark::before {
+  left: 5px;
+  transform: rotate(27deg);
+}
+
+.oxa-brand-mark::after {
+  right: 5px;
+  transform: rotate(-27deg);
+}
+
+.oxa-brand-mark span {
+  position: absolute;
+  z-index: 1;
+  right: 4px;
+  bottom: 3px;
+  width: 15px;
+  height: 9px;
+  background: var(--oxa-shell-surface, #fff);
+  transform: skewX(-27deg);
+}
+
+.oxa-brand-copy {
+  display: grid;
+  min-width: 0;
+  gap: 5px;
+}
+
+.oxa-brand-copy strong {
+  overflow: hidden;
+  color: var(--oxa-shell-text, #1f1f1f);
+  font-size: 16px;
+  line-height: 1.2;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.oxa-brand-copy span {
+  overflow: hidden;
+  color: var(--oxa-shell-text-secondary, #595959);
+  font-size: 12px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.oxa-menu {
+  flex: 1;
+  overflow-y: auto;
+  border-inline-end: 0 !important;
+  background: transparent !important;
+  padding: 6px 12px 80px;
+}
+
+.oxa-menu .ant-menu-submenu-title,
+.oxa-menu .ant-menu-item {
+  min-height: 44px;
+  margin-inline: 0;
+  margin-block: 4px;
+  color: var(--oxa-shell-text-secondary, #595959);
+  font-weight: 600;
+}
+
+.oxa-menu .ant-menu-submenu .ant-menu-item {
+  font-weight: 500;
+}
+
+.oxa-menu .ant-menu-item-selected {
+  color: var(--oxa-shell-primary, #1677ff);
+  background: var(--oxa-shell-primary-bg, #e6f4ff) !important;
+}
+
+.oxa-sider-footer {
+  position: absolute;
+  right: 12px;
+  bottom: 16px;
+  left: 12px;
+  border-top: 1px solid var(--oxa-shell-border, #f0f0f0);
+  background: var(--oxa-shell-surface, #fff);
+  padding-top: 12px;
+}
+
+.oxa-sider-footer .ant-btn {
+  min-height: 42px;
+  justify-content: flex-start;
+  color: var(--oxa-shell-text-secondary, #595959);
+  font-weight: 600;
+}
+
+.oxa-workspace {
+  min-width: 0;
+  background: var(--oxa-shell-bg, #f5f5f5);
+}
+
+.oxa-topbar {
+  position: sticky;
+  top: 0;
+  z-index: 15;
+  display: flex;
+  height: 52px;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 1px solid var(--oxa-shell-border, #f0f0f0);
+  background: var(--oxa-shell-surface, #fff) !important;
+  padding: 0 20px !important;
+  line-height: normal;
+}
+
+.oxa-topbar .ant-breadcrumb {
+  color: var(--oxa-shell-text-secondary, #595959);
+  font-weight: 500;
+}
+
+.oxa-topbar .ant-breadcrumb-link {
+  cursor: pointer;
+}
+
+.oxa-current-user {
+  display: inline-flex;
+  min-width: 0;
+  height: 36px;
+  align-items: center;
+  gap: 8px;
+  justify-content: flex-end;
+  border: 0;
+  border-radius: 6px;
+  background: transparent;
+  padding: 3px 6px;
+  color: var(--oxa-shell-text, #1f1f1f);
+  cursor: pointer;
+  transition: background 0.2s;
+}
+
+.oxa-current-user:hover,
+.oxa-current-user:focus-visible {
+  background: var(--oxa-shell-hover, rgb(0 0 0 / 6%));
+  outline: 0;
+}
+
+.oxa-current-user-avatar {
+  background: var(--oxa-shell-primary, #1677ff);
+}
+
+.oxa-current-user strong {
+  max-width: 96px;
+  overflow: hidden;
+  font-size: 13px;
+  font-weight: 600;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.oxa-current-user-chevron {
+  color: var(--oxa-shell-text-tertiary, #8c8c8c);
+  font-size: 10px;
+}
+
+.oxa-user-dropdown {
+  width: 292px;
+  overflow: hidden;
+  border: 1px solid var(--oxa-shell-border, #f0f0f0);
+  border-radius: 8px;
+  background: var(--oxa-shell-elevated, #fff);
+  box-shadow: var(--oxa-shell-shadow, 0 1px 6px rgb(0 0 0 / 8%));
+  padding-top: 4px;
+}
+
+.oxa-user-dropdown-profile {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 14px 16px 10px;
+}
+
+.oxa-user-dropdown-profile > div:last-child {
+  display: grid;
+  min-width: 0;
+  flex: 1;
+  gap: 2px;
+}
+
+.oxa-user-dropdown-profile strong,
+.oxa-user-dropdown-profile span,
+.oxa-user-dropdown-profile small {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.oxa-user-dropdown-profile span,
+.oxa-user-dropdown-profile small,
+.oxa-user-dropdown-roles > span,
+.oxa-user-dropdown-theme > span {
+  color: var(--oxa-shell-text-secondary, #595959);
+  font-size: 12px;
+}
+
+.oxa-user-dropdown-roles,
+.oxa-user-dropdown-theme {
+  display: grid;
+  gap: 7px;
+  margin: 0 12px;
+  border-top: 1px solid var(--oxa-shell-border, #f0f0f0);
+  padding: 10px 4px;
+}
+
+.oxa-user-dropdown > .ant-dropdown-menu {
+  border-top: 1px solid var(--oxa-shell-border, #f0f0f0);
+  border-radius: 0;
+  box-shadow: none;
+}
+
+.oxa-role-switch-select {
+  width: 100%;
+}
+
+.oxa-role-switch-option {
+  display: grid;
+  min-width: 0;
+  gap: 2px;
+  padding: 2px 0;
+}
+
+.oxa-role-switch-option strong,
+.oxa-role-switch-option span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.oxa-role-switch-option span {
+  color: var(--oxa-shell-text-secondary, #595959);
+  font-size: 12px;
+}
+
+.oxa-role-switch-help {
+  margin: 10px 0 0 !important;
+}
+
+.oxa-route-history {
+  position: sticky;
+  z-index: 14;
+  top: 52px;
+  height: 36px;
+  overflow: hidden;
+  border-bottom: 1px solid var(--oxa-shell-border, #f0f0f0);
+  background: var(--oxa-shell-surface, #fff);
+  padding: 0 12px;
+}
+
+.oxa-route-history .ant-tabs,
+.oxa-route-history .ant-tabs-nav {
+  height: 35px;
+  margin: 0;
+}
+
+.oxa-route-history .ant-tabs-content-holder {
+  display: none;
+}
+
+.oxa-route-history .ant-tabs-tab {
+  border: 0 !important;
+  border-right: 1px solid var(--oxa-shell-border, #f0f0f0) !important;
+  border-radius: 0 !important;
+  background: transparent !important;
+  padding: 5px 12px !important;
+}
+
+.oxa-route-history .ant-tabs-tab-active {
+  background: var(--oxa-shell-primary-bg, #e6f4ff) !important;
+}
+
+.oxa-mobile-page {
+  min-height: 100vh;
+  box-sizing: border-box;
+  background: var(--oxa-shell-bg, #f5f5f5);
+  padding: 16px;
+}
+
+.oxa-mobile-header {
+  display: grid;
+  gap: 6px;
+  margin-bottom: 14px;
+}
+
+.oxa-mobile-header .ant-typography {
+  margin: 0;
+}
+
+.oxa-mobile-form {
+  margin-top: 14px;
+}
+
+.oxa-mobile-field .ant-form-item-control-input-content {
+  min-height: 44px;
+}
+
+.oxa-mobile-input {
+  width: 100%;
+  min-height: 42px;
+  box-sizing: border-box;
+  border: 1px solid var(--oxa-shell-border-strong, #d9d9d9);
+  border-radius: 8px;
+  background: var(--oxa-shell-surface, #fff);
+  padding: 9px 11px;
+  color: var(--oxa-shell-text, #1f1f1f);
+  font: inherit;
+}
+
+.oxa-mobile-input:focus {
+  border-color: var(--oxa-shell-primary, #1677ff);
+  outline: 2px solid
+    color-mix(in srgb, var(--oxa-shell-primary, #1677ff) 15%, transparent);
+}
+
+.oxa-mobile-filter,
+.oxa-mobile-pagination,
+.oxa-mobile-record-heading,
+.oxa-mobile-record-fields {
+  display: grid;
+  gap: 10px;
+}
+
+.oxa-mobile-filter {
+  margin: 14px 0;
+}
+
+.oxa-mobile-record-list {
+  display: grid;
+  gap: 12px;
+  margin-top: 14px;
+}
+
+.oxa-mobile-record-card {
+  border-color: var(--oxa-shell-border, #f0f0f0);
+}
+
+.oxa-mobile-record-heading {
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+}
+
+.oxa-mobile-record-heading a {
+  overflow: hidden;
+  color: var(--oxa-shell-primary, #1677ff);
+  font-size: 16px;
+  font-weight: 650;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.oxa-mobile-record-fields {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  margin: 12px 0;
+}
+
+.oxa-mobile-record-fields > div {
+  min-width: 0;
+}
+
+.oxa-mobile-pagination {
+  grid-template-columns: 1fr auto 1fr;
+  align-items: center;
+  margin-top: 14px;
+}
+
+.oxa-mobile-pagination .ant-btn:last-child {
+  justify-self: end;
+}
+
+.oxa-content {
+  min-width: 0;
+  background: var(--oxa-shell-bg, #f5f5f5);
+}
+
+.oxa-main {
+  width: 100%;
+  max-width: 1680px;
+  min-height: calc(100vh - 88px);
+  margin: 0 auto;
+  padding: 20px 24px 48px;
+}
+
+.oxa-title {
+  margin: 0;
+  color: var(--oxa-shell-text, #1f1f1f);
+  font-size: 19px;
+}
+
+.oxa-muted {
+  color: var(--oxa-shell-text-secondary, #595959);
+}
+
+.oxa-page-heading {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  margin-bottom: 18px;
+}
+
+.oxa-list-card,
+.oxa-section-card,
+.oxa-detail-hero,
+.oxa-edit-hero {
+  border-color: var(--oxa-shell-border, #f0f0f0);
+  background: var(--oxa-shell-surface, #fff);
+  box-shadow: var(--oxa-shell-shadow, 0 1px 6px rgb(0 0 0 / 8%));
+}
+
+.oxa-list-card > .ant-card-body {
+  padding: 0;
+}
+
+.oxa-list-surface {
+  display: grid;
+}
+
+.oxa-search-panel {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: start;
+  gap: 12px;
+  border-bottom: 1px solid var(--oxa-shell-border, #f0f0f0);
+  padding: 16px;
+}
+
+.oxa-filter-grid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(170px, 1fr));
+  gap: 12px;
+}
+
+.oxa-filter-item > .ant-select,
+.oxa-filter-item > .ant-picker {
+  width: 100%;
+}
+
+.oxa-filter-item.is-collapsed {
+  display: none;
+}
+
+.oxa-filter-actions,
+.oxa-list-toolbar,
+.oxa-list-toolbar-primary,
+.oxa-list-toolbar-secondary {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.oxa-filter-actions {
+  align-items: flex-start;
+}
+
+.oxa-list-toolbar {
+  min-height: 56px;
+  justify-content: space-between;
+  border-bottom: 1px solid var(--oxa-shell-border, #f0f0f0);
+  padding: 10px 16px;
+}
+
+.oxa-list-toolbar-secondary .ant-btn {
+  color: var(--oxa-shell-text-secondary, #595959);
+}
+
+.oxa-batch-bar {
+  display: flex;
+  min-height: 52px;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  border-bottom: 1px solid var(--oxa-shell-border, #f0f0f0);
+  background: var(--ant-color-primary-bg, #e6f4ff);
+  padding: 8px 16px;
+}
+
+.oxa-import-errors {
+  max-height: 180px;
+  margin: 8px 0 0;
+  overflow: auto;
+  padding-left: 20px;
+}
+
+.oxa-list-card .ant-table-wrapper {
+  border: 0;
+  border-radius: 0;
+  overflow: hidden;
+}
+
+.oxa-list-card .ant-table-thead > tr > th {
+  background: var(--oxa-shell-subtle, #fafafa);
+  color: var(--oxa-shell-text, #1f1f1f);
+  font-weight: 600;
+}
+
+.oxa-list-card .ant-table-pagination {
+  margin: 16px !important;
+}
+
+.oxa-sections {
+  display: grid;
+  gap: 16px;
+}
+
+.oxa-resource-form {
+  display: grid;
+  gap: 16px;
+}
+
+.oxa-section-card .ant-card-head {
+  min-height: 48px;
+  padding-inline: 18px;
+}
+
+.oxa-section-card .ant-card-body {
+  padding: 18px;
+}
+
+.oxa-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  column-gap: 20px;
+}
+
+.oxa-field-wide {
+  grid-column: 1 / -1;
+}
+
+.oxa-actions {
+  position: sticky;
+  z-index: 5;
+  bottom: 0;
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+  border-top: 1px solid var(--oxa-shell-border, #f0f0f0);
+  background: color-mix(
+    in srgb,
+    var(--oxa-shell-surface, #fff) 96%,
+    transparent
+  );
+  padding: 14px 0;
+  backdrop-filter: blur(8px);
+}
+
+.oxa-form-full .oxa-actions {
+  margin-top: 4px;
+  padding-inline: 18px;
+  box-shadow: 0 -3px 12px color-mix(in srgb, var(--oxa-shell-text, #1f1f1f) 4%, transparent);
+}
+
+.oxa-authoritative-selector {
+  width: 100%;
+}
+
+.oxa-selector-option {
+  display: flex;
+  width: 100%;
+  min-height: 40px;
+  align-items: center;
+}
+
+.oxa-selector-option-copy {
+  display: grid;
+  min-width: 0;
+  gap: 2px;
+}
+
+.oxa-selector-option-copy strong,
+.oxa-selector-option-copy small {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.oxa-selector-option-copy small,
+.oxa-selector-tag small,
+.oxa-resolved-item small {
+  color: var(--oxa-shell-text-secondary, #595959);
+  font-size: 11px;
+}
+
+.oxa-selector-icon {
+  display: grid;
+  width: 28px;
+  height: 28px;
+  place-items: center;
+  border-radius: 7px;
+  background: var(--oxa-shell-primary-bg, #e6f4ff);
+  color: var(--oxa-shell-primary, #1677ff);
+  font-size: 14px;
+}
+
+.oxa-selector-avatar {
+  background: var(--oxa-shell-primary-bg, #e6f4ff);
+  color: var(--oxa-shell-primary, #1677ff);
+  font-size: 12px;
+}
+
+.oxa-selector-tag {
+  display: inline-flex;
+  height: 26px;
+  align-items: center;
+  gap: 5px;
+  border-color: var(--oxa-shell-border, #f0f0f0);
+  background: var(--oxa-shell-subtle, #fafafa);
+  padding-inline: 4px 7px;
+}
+
+.oxa-selector-tag .ant-avatar {
+  width: 20px !important;
+  min-width: 20px;
+  height: 20px !important;
+  font-size: 10px;
+  line-height: 20px;
+}
+
+.oxa-resolved-values {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.oxa-resolved-item {
+  display: inline-flex;
+  min-height: 30px;
+  align-items: center;
+  gap: 7px;
+  border: 1px solid var(--oxa-shell-border, #f0f0f0);
+  border-radius: 7px;
+  background: var(--oxa-shell-subtle, #fafafa);
+  padding: 4px 8px;
+}
+
+.oxa-resolved-item > span:last-child {
+  display: grid;
+  gap: 1px;
+}
+
+.oxa-resolved-resource .oxa-resolved-item {
+  border-color: var(--oxa-shell-primary-border, #91caff);
+  background: var(--oxa-shell-primary-bg, #e6f4ff);
+  color: var(--oxa-shell-primary, #1677ff);
+}
+
+.oxa-directory-trigger {
+  display: flex;
+  min-height: 38px;
+  align-items: center;
+  gap: 8px;
+  border: 1px solid var(--oxa-shell-border-strong, #d9d9d9);
+  border-radius: 8px;
+  background: var(--oxa-shell-surface, #fff);
+  color: var(--oxa-shell-text, #1f1f1f);
+  padding: 3px 5px 3px 10px;
+  cursor: pointer;
+  transition: border-color 0.2s, box-shadow 0.2s;
+}
+
+.oxa-directory-trigger:hover,
+.oxa-directory-trigger:focus-visible {
+  border-color: var(--oxa-shell-primary, #1677ff);
+  box-shadow: 0 0 0 2px
+    color-mix(in srgb, var(--oxa-shell-primary, #1677ff) 10%, transparent);
+  outline: 0;
+}
+
+.oxa-directory-trigger.is-disabled {
+  border-color: var(--oxa-shell-border-strong, #d9d9d9);
+  background: var(--oxa-shell-subtle, #fafafa);
+  color: var(--oxa-shell-text-disabled, rgb(0 0 0 / 25%));
+  cursor: not-allowed;
+}
+
+.oxa-directory-trigger-icon {
+  color: var(--oxa-shell-primary, #1677ff);
+}
+
+.oxa-directory-trigger-values {
+  display: flex;
+  min-width: 0;
+  flex: 1;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 4px;
+}
+
+.oxa-directory-placeholder {
+  color: var(--oxa-shell-text-disabled, rgb(0 0 0 / 25%));
+}
+
+.oxa-directory-panel {
+  display: grid;
+  gap: 14px;
+}
+
+.oxa-directory-main {
+  display: grid;
+  min-height: 460px;
+  grid-template-columns: 220px minmax(280px, 1fr) 240px;
+  overflow: hidden;
+  border: 1px solid var(--oxa-shell-border, #f0f0f0);
+  border-radius: 8px;
+  background: var(--oxa-shell-surface, #fff);
+}
+
+.oxa-directory-tree-pane,
+.oxa-directory-member-pane,
+.oxa-directory-selected-pane {
+  min-width: 0;
+  padding: 14px;
+}
+
+.oxa-directory-tree-pane {
+  border-right: 1px solid var(--oxa-shell-border, #f0f0f0);
+  background: var(--oxa-shell-subtle, #fafafa);
+}
+
+.oxa-directory-member-pane {
+  display: grid;
+  min-height: 460px;
+  grid-template-rows: auto minmax(0, 1fr) auto;
+  gap: 10px;
+}
+
+.oxa-directory-members {
+  max-height: 364px;
+  overflow: auto;
+}
+
+.oxa-directory-member-row {
+  min-height: 58px;
+  border-bottom: 1px solid var(--oxa-shell-border, #f0f0f0);
+  padding: 8px 4px;
+}
+
+.oxa-directory-results {
+  display: grid;
+  gap: 6px;
+}
+
+.oxa-directory-department-row {
+  display: flex;
+  min-height: 54px;
+  align-items: center;
+  gap: 10px;
+  border: 1px solid transparent;
+  border-radius: 7px;
+  padding: 8px;
+  cursor: pointer;
+}
+
+.oxa-directory-department-row:hover,
+.oxa-directory-department-row:focus-visible {
+  border-color: var(--oxa-shell-primary-border, #91caff);
+  background: var(--oxa-shell-primary-bg, #e6f4ff);
+  outline: 0;
+}
+
+.oxa-directory-department-row > span:nth-child(2) {
+  display: grid;
+  min-width: 0;
+  flex: 1;
+  gap: 2px;
+}
+
+.oxa-directory-department-row small {
+  color: var(--oxa-shell-text-secondary, #595959);
+  font-size: 11px;
+}
+
+.oxa-directory-selected-pane {
+  border-left: 1px solid var(--oxa-shell-border, #f0f0f0);
+  background: var(--oxa-shell-subtle, #fafafa);
+}
+
+.oxa-directory-pane-title,
+.oxa-directory-pagination,
+.oxa-directory-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+}
+
+.oxa-directory-pane-title {
+  min-height: 32px;
+  margin-bottom: 10px;
+  color: var(--oxa-shell-text, #1f1f1f);
+  font-weight: 600;
+}
+
+.oxa-directory-member-row {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  gap: 10px;
+  cursor: pointer;
+}
+
+.oxa-directory-member-row > span:last-child,
+.oxa-directory-selected-item > span:nth-child(2) {
+  display: grid;
+  min-width: 0;
+  flex: 1;
+  gap: 2px;
+}
+
+.oxa-directory-member-row small,
+.oxa-directory-selected-item small {
+  overflow: hidden;
+  color: var(--oxa-shell-text-secondary, #595959);
+  font-size: 11px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.oxa-directory-selected-list {
+  display: grid;
+  gap: 8px;
+}
+
+.oxa-directory-selected-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  border: 1px solid var(--oxa-shell-border, #f0f0f0);
+  border-radius: 7px;
+  background: var(--oxa-shell-surface, #fff);
+  padding: 7px;
+}
+
+.oxa-department-main {
+  grid-template-columns: minmax(300px, 1fr) 240px;
+}
+
+.oxa-directory-footer {
+  justify-content: flex-end;
+  border-top: 1px solid var(--oxa-shell-border, #f0f0f0);
+  padding-top: 14px;
+}
+
+.oxa-file-field {
+  display: grid;
+  gap: 10px;
+}
+
+.oxa-file-dropzone .ant-upload-drag {
+  min-height: 72px;
+  border-color: var(--oxa-shell-border-strong, #d9d9d9);
+  background: var(--oxa-shell-subtle, #fafafa);
+  padding: 12px;
+}
+
+.oxa-file-dropzone .ant-upload-drag-container {
+  display: grid;
+  gap: 5px;
+  color: var(--oxa-shell-text-secondary, #595959);
+}
+
+.oxa-file-dropzone small {
+  color: var(--oxa-shell-text-tertiary, #8c8c8c);
+}
+
+.oxa-file-dropzone kbd {
+  border: 1px solid var(--oxa-shell-border-strong, #d9d9d9);
+  border-bottom-width: 2px;
+  border-radius: 4px;
+  background: var(--oxa-shell-surface, #fff);
+  padding: 1px 5px;
+  color: var(--oxa-shell-text, #1f1f1f);
+  font-family: inherit;
+}
+
+.oxa-file-list {
+  display: grid;
+  gap: 8px;
+}
+
+.oxa-file-item,
+.oxa-file-error {
+  display: flex;
+  min-height: 50px;
+  align-items: center;
+  gap: 10px;
+  border: 1px solid var(--oxa-shell-border, #f0f0f0);
+  border-radius: 8px;
+  background: var(--oxa-shell-surface, #fff);
+  padding: 7px 9px;
+}
+
+.oxa-file-kind {
+  display: grid;
+  width: 32px;
+  height: 32px;
+  place-items: center;
+  border-radius: 7px;
+  background: var(--oxa-shell-primary-bg, #e6f4ff);
+  color: var(--oxa-shell-primary, #1677ff);
+}
+
+.oxa-file-thumbnail {
+  display: block;
+  width: 32px;
+  height: 32px;
+  object-fit: cover;
+}
+
+.oxa-file-meta {
+  display: grid;
+  min-width: 0;
+  flex: 1;
+  gap: 2px;
+}
+
+.oxa-file-name-button {
+  border: 0;
+  background: transparent;
+  padding: 0;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.oxa-file-name-button:hover strong {
+  color: var(--oxa-shell-primary, #1677ff);
+}
+
+.oxa-file-name-button:disabled {
+  cursor: wait;
+  opacity: 0.65;
+}
+
+.oxa-file-meta strong {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.oxa-file-meta small,
+.oxa-file-empty {
+  color: var(--oxa-shell-text-secondary, #595959);
+  font-size: 12px;
+}
+
+.oxa-file-error {
+  border-color: var(--oxa-shell-error-border, #ffccc7);
+  background: var(--oxa-shell-error-bg, #fff2f0);
+  color: var(--oxa-shell-error, #ff4d4f);
+}
+
+.oxa-file-error > span {
+  flex: 1;
+}
+
+.oxa-file-empty {
+  border: 1px dashed var(--oxa-shell-border-strong, #d9d9d9);
+  border-radius: 8px;
+  padding: 10px;
+  text-align: center;
+}
+
+.oxa-location-field {
+  display: grid;
+  gap: 10px;
+}
+
+.oxa-location-field .ant-alert {
+  max-width: 520px;
+}
+
+.oxa-location-value {
+  display: inline-grid;
+  max-width: 100%;
+  gap: 2px;
+}
+
+.oxa-location-value > span {
+  overflow-wrap: anywhere;
+}
+
+.oxa-location-value-readonly {
+  min-width: 160px;
+}
+
+.oxa-address-field {
+  display: grid;
+  gap: 8px;
+  width: 100%;
+}
+
+.oxa-address-field > .ant-cascader,
+.oxa-address-field > .ant-select {
+  width: 100%;
+}
+
+.oxa-address-value {
+  display: inline-flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.oxa-mobile-address-field {
+  grid-template-columns: minmax(0, 1fr) auto;
+}
+
+.oxa-mobile-address-field > .ant-btn:first-child {
+  min-width: 0;
+  overflow: hidden;
+  text-align: left;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.oxa-address-mobile-levels {
+  display: grid;
+  gap: 12px;
+}
+
+.oxa-address-mobile-levels > .ant-select {
+  width: 100%;
+}
+
+.oxa-address-mobile-actions {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 20px;
+  width: 100%;
+}
+
+.oxa-rich-text-field,
+.oxa-json-field {
+  display: grid;
+  gap: 8px;
+  width: 100%;
+}
+
+.oxa-rich-text-toolbar {
+  border: 1px solid var(--oxa-shell-border-strong, #d9d9d9);
+  border-bottom: 0;
+  border-radius: 6px 6px 0 0;
+  padding: 6px;
+}
+
+.oxa-rich-text-editor {
+  border: 1px solid var(--oxa-shell-border-strong, #d9d9d9);
+  border-radius: 0 0 6px 6px;
+  min-height: 160px;
+  overflow-wrap: anywhere;
+  padding: 10px 12px;
+}
+
+.oxa-rich-text-editor:focus {
+  border-color: var(--oxa-shell-primary, #1677ff);
+  box-shadow: 0 0 0 2px rgb(5 145 255 / 10%);
+  outline: 0;
+}
+
+.oxa-rich-text-value {
+  max-width: 100%;
+  overflow-wrap: anywhere;
+}
+
+.oxa-rich-text-value img {
+  height: auto;
+  max-width: 100%;
+}
+
+.oxa-mobile-rich-text-field .oxa-rich-text-editor {
+  min-height: 220px;
+}
+
+.oxa-json-field textarea,
+.oxa-json-value {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+}
+
+.oxa-json-value {
+  margin: 0;
+  max-height: 320px;
+  max-width: 100%;
+  overflow: auto;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.oxa-json-valid {
+  color: var(--oxa-shell-success, #389e0d);
+}
+
+.oxa-signature-field,
+.oxa-signature-value,
+.oxa-signature-pad {
+  display: grid;
+  gap: 10px;
+  width: 100%;
+}
+
+.oxa-signature-value {
+  justify-items: start;
+}
+
+.oxa-signature-image {
+  max-height: 180px;
+  max-width: min(100%, 520px);
+  object-fit: contain;
+}
+
+.oxa-signature-hash {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  overflow-wrap: anywhere;
+}
+
+.oxa-signature-canvas {
+  background: #fff;
+  border: 1px solid var(--oxa-shell-border-strong, #d9d9d9);
+  border-radius: 6px;
+  height: 240px;
+  touch-action: none;
+  user-select: none;
+  width: 100%;
+}
+
+.oxa-subtable-field {
+  width: 100%;
+  min-width: 0;
+}
+
+.oxa-subtable-toolbar {
+  display: flex;
+  min-height: 32px;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 8px;
+}
+
+.oxa-subtable-loading {
+  display: flex;
+  min-height: 88px;
+  align-items: center;
+  justify-content: center;
+}
+
+.oxa-mobile-subtable-list {
+  border-top: 1px solid #e5e7eb;
+}
+
+.oxa-mobile-subtable-row {
+  padding: 12px 0;
+  border-bottom: 1px solid #e5e7eb;
+}
+
+.oxa-mobile-subtable-values {
+  display: grid;
+  gap: 10px;
+  margin-bottom: 8px;
+}
+
+.oxa-mobile-subtable-values > div {
+  display: grid;
+  grid-template-columns: minmax(88px, 32%) minmax(0, 1fr);
+  gap: 8px;
+  align-items: start;
+}
+
+.oxa-mobile-subtable-editor {
+  display: grid;
+  gap: 4px;
+}
+
+.oxa-mobile-number-field {
+  align-items: center;
+  border: 1px solid var(--oxa-shell-border-strong, #d9d9d9);
+  border-radius: 6px;
+  display: grid;
+  gap: 8px;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  min-height: 40px;
+  padding: 0 10px;
+}
+
+.oxa-mobile-number-field > input {
+  border: 0;
+  min-width: 0;
+  outline: 0;
+  width: 100%;
+}
+
+.oxa-mobile-location-field .ant-space {
+  width: 100%;
+}
+
+.oxa-dictionary-drawer .ant-drawer-body {
+  padding: 22px;
+}
+
+.oxa-detail-hero,
+.oxa-edit-hero {
+  margin-bottom: 16px;
+}
+
+.oxa-detail-hero .ant-card-body,
+.oxa-edit-hero .ant-card-body {
+  padding: 18px 20px;
+}
+
+.oxa-detail-hero-top,
+.oxa-detail-hero-main,
+.oxa-edit-hero-title {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.oxa-file-preview-page {
+  min-height: 100vh;
+  background: var(--oxa-shell-bg, #f5f5f5);
+}
+
+.oxa-file-preview-toolbar {
+  position: sticky;
+  z-index: 10;
+  top: 0;
+  display: flex;
+  min-height: 66px;
+  align-items: center;
+  justify-content: space-between;
+  gap: 20px;
+  border-bottom: 1px solid var(--oxa-shell-border, #f0f0f0);
+  background: color-mix(
+    in srgb,
+    var(--oxa-shell-surface, #fff) 96%,
+    transparent
+  );
+  padding: 10px 20px;
+  box-shadow: var(--oxa-shell-shadow, 0 1px 6px rgb(0 0 0 / 8%));
+  backdrop-filter: blur(12px);
+}
+
+.oxa-file-preview-toolbar > div:last-child {
+  display: flex;
+  gap: 8px;
+}
+
+.oxa-file-preview-title {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  gap: 12px;
+}
+
+.oxa-file-preview-title > .anticon {
+  color: var(--oxa-shell-primary, #1677ff);
+  font-size: 26px;
+}
+
+.oxa-file-preview-title > div {
+  display: grid;
+  min-width: 0;
+  gap: 2px;
+}
+
+.oxa-file-preview-title strong,
+.oxa-file-preview-title span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.oxa-file-preview-title span {
+  color: var(--oxa-shell-text-secondary, #595959);
+  font-size: 12px;
+}
+
+.oxa-file-preview-body {
+  display: grid;
+  min-height: calc(100vh - 66px);
+  place-items: center;
+  padding: 20px;
+}
+
+.oxa-preview-frame {
+  width: 100%;
+  height: calc(100vh - 106px);
+  border: 0;
+  border-radius: 8px;
+  background: var(--oxa-shell-surface, #fff);
+  box-shadow: 0 8px 32px rgb(24 42 72 / 10%);
+}
+
+.oxa-preview-image {
+  max-width: 100%;
+  max-height: calc(100vh - 106px);
+  border-radius: 8px;
+  object-fit: contain;
+  box-shadow: 0 8px 32px rgb(24 42 72 / 12%);
+}
+
+.oxa-docx-preview,
+.oxa-spreadsheet-preview {
+  width: 100%;
+  height: calc(100vh - 106px);
+  overflow: auto;
+  border-radius: 8px;
+  background: var(--oxa-shell-surface, #fff);
+  box-shadow: 0 8px 32px rgb(24 42 72 / 10%);
+}
+
+.oxa-docx-preview .docx-wrapper {
+  min-height: 100%;
+  background: var(--oxa-shell-subtle, #fafafa);
+  padding: 24px;
+}
+
+.oxa-spreadsheet-preview {
+  display: flex;
+  flex-direction: column;
+}
+
+.oxa-spreadsheet-preview > .ant-segmented {
+  flex: 0 0 auto;
+  margin: 12px;
+}
+
+.oxa-spreadsheet-scroll {
+  min-height: 0;
+  flex: 1;
+  overflow: auto;
+  border-top: 1px solid var(--oxa-shell-border, #f0f0f0);
+}
+
+.oxa-spreadsheet-scroll table {
+  min-width: 100%;
+  border-spacing: 0;
+  border-collapse: separate;
+  font-size: 13px;
+}
+
+.oxa-spreadsheet-scroll th,
+.oxa-spreadsheet-scroll td {
+  min-width: 96px;
+  max-width: 360px;
+  border-right: 1px solid var(--oxa-shell-border, #f0f0f0);
+  border-bottom: 1px solid var(--oxa-shell-border, #f0f0f0);
+  padding: 7px 9px;
+  background: var(--oxa-shell-surface, #fff);
+  text-align: left;
+  vertical-align: top;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.oxa-spreadsheet-scroll th {
+  position: sticky;
+  z-index: 1;
+  left: 0;
+  min-width: 52px;
+  background: var(--oxa-shell-subtle, #fafafa);
+  color: var(--oxa-shell-text-secondary, #595959);
+  text-align: center;
+}
+
+.oxa-detail-hero-top {
+  align-items: flex-start;
+}
+
+.oxa-detail-hero-top > .ant-btn:first-child,
+.oxa-edit-hero-title .ant-btn-link {
+  height: auto;
+  padding: 0;
+}
+
+.oxa-detail-hero-main {
+  margin-top: 14px;
+  align-items: flex-end;
+}
+
+.oxa-detail-hero-main .ant-typography,
+.oxa-edit-hero-title .ant-typography {
+  margin-top: 0;
+  margin-bottom: 4px;
+}
+
+.oxa-detail-hero-main h2.ant-typography {
+  font-size: 22px;
+}
+
+.oxa-resource-name.ant-typography {
+  margin-bottom: 2px;
+  font-size: 18px;
+}
+
+.oxa-record-meta {
+  color: var(--oxa-shell-text-secondary, #595959);
+  font-size: 12px;
+}
+
+.oxa-edit-hero-title {
+  margin-bottom: 14px;
+  align-items: flex-end;
+}
+
+.oxa-edit-hero-title h2.ant-typography {
+  margin-top: 8px;
+  font-size: 22px;
+}
+
+.oxa-detail-layout {
+  display: block;
+}
+
+.oxa-detail-main,
+.oxa-detail-aside {
+  display: grid;
+  gap: 16px;
+}
+
+.oxa-detail-aside {
+  position: sticky;
+  top: 108px;
+}
+
+.oxa-detail-main .ant-descriptions-item-label,
+.oxa-detail-aside .ant-descriptions-item-label {
+  color: var(--oxa-shell-text-secondary, #595959);
+}
+
+.oxa-audit-collapse {
+  overflow: hidden;
+  border: 1px solid var(--oxa-shell-border, #f0f0f0);
+  border-radius: 8px;
+  background: var(--oxa-shell-surface, #fff);
+}
+
+.oxa-audit-collapse > .ant-collapse-item > .ant-collapse-header {
+  min-height: 52px;
+  align-items: center;
+  padding: 14px 18px;
+}
+
+.oxa-audit-collapse .ant-collapse-content-box {
+  padding: 0 18px 12px !important;
+}
+
+.oxa-audit-collapse-heading {
+  display: flex;
+  min-width: 0;
+  flex: 1;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.oxa-audit-collapse-heading span {
+  color: var(--oxa-shell-text-secondary, #595959);
+  font-size: 12px;
+}
+
+.oxa-audit-loading {
+  padding: 18px 0;
+  color: var(--oxa-shell-text-secondary, #595959);
+  text-align: center;
+}
+
+.oxa-audit-entry {
+  display: grid;
+  gap: 4px;
+  padding: 10px 0;
+  border-bottom: 1px solid var(--oxa-shell-border, #f0f0f0);
+}
+
+.oxa-audit-entry:last-child {
+  border-bottom: 0;
+}
+
+.oxa-audit-heading,
+.oxa-audit-meta,
+.oxa-audit-change-values {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.oxa-audit-heading {
+  justify-content: space-between;
+}
+
+.oxa-audit-meta {
+  flex-wrap: wrap;
+  color: var(--oxa-shell-text-secondary, #595959);
+  font-size: 12px;
+}
+
+.oxa-audit-meta .ant-typography {
+  font-size: 12px;
+}
+
+.oxa-audit-changes {
+  display: grid;
+  gap: 7px;
+  margin-top: 4px;
+}
+
+.oxa-audit-change {
+  display: grid;
+  gap: 3px;
+  padding: 7px 8px;
+  border-radius: 6px;
+  background: var(--oxa-shell-subtle, #fafafa);
+}
+
+.oxa-audit-change-values {
+  min-width: 0;
+  color: var(--oxa-shell-text-secondary, #595959);
+  font-size: 12px;
+}
+
+.oxa-audit-change-values > :not(svg) {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.oxa-audit-entry > span {
+  color: var(--oxa-shell-text-secondary, #595959);
+  font-size: 12px;
+}
+
+.oxa-mobile-reference-trigger {
+  display: flex;
+  width: 100%;
+  min-height: 42px;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 9px 12px;
+  border: 1px solid var(--oxa-shell-border-strong, #d9d9d9);
+  border-radius: 8px;
+  background: var(--oxa-shell-surface, #fff);
+  color: var(--oxa-shell-text, #1f1f1f);
+  font: inherit;
+  text-align: left;
+}
+
+.oxa-mobile-reference-trigger:disabled {
+  background: var(--oxa-shell-subtle, #fafafa);
+  color: var(--oxa-shell-text-disabled, rgb(0 0 0 / 25%));
+}
+
+.oxa-mobile-reference-placeholder {
+  color: var(--oxa-shell-text-disabled, rgb(0 0 0 / 25%));
+}
+
+.oxa-mobile-reference-backdrop {
+  position: fixed;
+  z-index: 1200;
+  inset: 0;
+  display: flex;
+  align-items: flex-end;
+  background: var(--oxa-shell-mask, rgb(0 0 0 / 45%));
+}
+
+.oxa-mobile-reference-sheet {
+  display: grid;
+  width: 100%;
+  max-height: min(78vh, 640px);
+  gap: 12px;
+  padding: 16px 16px max(16px, env(safe-area-inset-bottom));
+  overflow: auto;
+  border-radius: 16px 16px 0 0;
+  background: var(--oxa-shell-elevated, #fff);
+  box-shadow: 0 -8px 32px rgb(15 23 42 / 18%);
+}
+
+.oxa-mobile-reference-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  color: var(--oxa-shell-text, #1f1f1f);
+}
+
+.oxa-mobile-reference-header button,
+.oxa-mobile-reference-more,
+.oxa-mobile-reference-confirm {
+  border: 0;
+  background: transparent;
+  color: var(--oxa-shell-primary, #1677ff);
+  font: inherit;
+}
+
+.oxa-mobile-reference-search {
+  width: 100%;
+}
+
+.oxa-mobile-reference-options {
+  display: grid;
+  gap: 4px;
+}
+
+.oxa-mobile-reference-option {
+  display: flex;
+  min-height: 48px;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 4px;
+  border: 0;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--oxa-shell-text, #1f1f1f);
+  font: inherit;
+  text-align: left;
+}
+
+.oxa-mobile-reference-option.is-selected {
+  background: var(--oxa-shell-primary-bg, #e6f4ff);
+}
+
+.oxa-mobile-reference-option:disabled {
+  color: var(--oxa-shell-text-disabled, rgb(0 0 0 / 25%));
+  opacity: 0.7;
+}
+
+.oxa-mobile-reference-option-copy {
+  display: grid;
+  min-width: 0;
+  flex: 1;
+  gap: 2px;
+}
+
+.oxa-mobile-reference-option-copy small {
+  overflow: hidden;
+  color: var(--oxa-shell-text-secondary, #595959);
+  font-size: 12px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.oxa-mobile-reference-loading,
+.oxa-mobile-reference-empty,
+.oxa-mobile-reference-error {
+  padding: 12px 4px;
+  color: var(--oxa-shell-text-secondary, #595959);
+  font-size: 13px;
+  text-align: center;
+}
+
+.oxa-mobile-reference-error {
+  color: var(--oxa-shell-error, #ff4d4f);
+}
+
+.oxa-mobile-reference-more,
+.oxa-mobile-reference-confirm {
+  min-height: 42px;
+  border-radius: 8px;
+  background: var(--oxa-shell-primary-bg, #e6f4ff);
+  font-weight: 600;
+  text-align: center;
+}
+
+.oxa-mobile-reference-confirm {
+  background: var(--oxa-shell-primary, #1677ff);
+  color: #fff;
+}
+
+.oxa-mobile-file-field {
+  display: grid;
+  gap: 8px;
+}
+
+.oxa-mobile-file-button {
+  display: inline-flex !important;
+  width: 100%;
+  min-height: 42px;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--oxa-shell-border-strong, #d9d9d9) !important;
+  border-radius: 8px;
+  background: var(--oxa-shell-surface, #fff) !important;
+  color: var(--oxa-shell-primary, #1677ff);
+  font-weight: 600;
+}
+
+.oxa-mobile-file-button.ant-btn:disabled {
+  background: var(--oxa-shell-subtle, #fafafa);
+  color: var(--oxa-shell-text-disabled, rgb(0 0 0 / 25%));
+}
+
+.oxa-mobile-pending-files {
+  display: grid;
+  gap: 8px;
+}
+
+.oxa-mobile-pending-file {
+  display: flex;
+  min-height: 42px;
+  align-items: center;
+  gap: 8px;
+  padding: 7px 9px;
+  border: 1px solid var(--oxa-shell-border, #f0f0f0);
+  border-radius: 8px;
+  background: var(--oxa-shell-subtle, #fafafa);
+  font-size: 13px;
+}
+
+.oxa-mobile-pending-file-name {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.oxa-mobile-pending-file-copy {
+  display: grid;
+  min-width: 0;
+  flex: 1;
+  gap: 2px;
+}
+
+.oxa-mobile-pending-file-copy small {
+  color: var(--oxa-shell-text-secondary, #595959);
+  font-size: 12px;
+}
+
+.oxa-mobile-pending-status {
+  color: var(--oxa-shell-primary, #1677ff);
+  white-space: nowrap;
+}
+
+.oxa-mobile-pending-error {
+  max-width: 42%;
+  overflow: hidden;
+  color: var(--oxa-shell-error, #ff4d4f);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+@media (max-width: 1280px) {
+  .oxa-grid,
+  .oxa-filter-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .oxa-detail-aside {
+    position: static;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 900px) {
+  .oxa-topbar {
+    height: 52px;
+    padding: 0 12px !important;
+  }
+
+  .oxa-current-user {
+    min-width: 0;
+  }
+
+  .oxa-current-user strong,
+  .oxa-current-user-chevron {
+    display: none;
+  }
+
+  .oxa-route-history {
+    top: 52px;
+  }
+
+  .oxa-main {
+    padding: 16px;
+  }
+
+  .oxa-grid,
+  .oxa-filter-grid,
+  .oxa-detail-aside {
+    grid-template-columns: 1fr;
+  }
+
+  .oxa-search-panel {
+    grid-template-columns: 1fr;
+  }
+
+  .oxa-filter-actions,
+  .oxa-list-toolbar,
+  .oxa-batch-bar {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  .oxa-list-toolbar-primary,
+  .oxa-list-toolbar-secondary {
+    flex-wrap: wrap;
+  }
+
+  .oxa-detail-hero-main,
+  .oxa-detail-hero-top,
+  .oxa-edit-hero-title,
+  .oxa-page-heading {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .oxa-record-meta {
+    align-self: stretch;
+  }
+
+  .oxa-directory-main,
+  .oxa-department-main {
+    min-height: 0;
+    grid-template-columns: 1fr;
+  }
+
+  .oxa-directory-tree-pane,
+  .oxa-directory-selected-pane {
+    border: 0;
+    border-bottom: 1px solid var(--oxa-shell-border, #f0f0f0);
+  }
+
+  .oxa-directory-tree-pane,
+  .oxa-directory-member-pane,
+  .oxa-directory-selected-pane {
+    max-height: 34vh;
+    overflow: auto;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .oxa-global-request-loading span {
+    width: 100%;
+    animation: none;
+    transform: none;
+  }
+}