/* Operations controls use CSS px, independently of the miniapp's rpx scale. */
:root {
  /* 后台弹层只有两档宽度：右侧滑出（抽屉/详情/工作区）默认 960，居中弹窗 560。
     唯一的加宽例外是 1200，且必须声明在打开的目标上（`data-drawer-width="wide"`
     或模板里的 `xgz-catalog-drawer--wide`），不能按加载进来的内容推断——否则
     刷新（占位期间命中不到内容）与下钻（换一个片段）时面板会横向跳动。 */
  --xgz-admin-drawer-width: 960px;
  --xgz-admin-drawer-wide-width: 1200px;
  --xgz-admin-modal-width: 560px;
  /* 图片/证照预览需要一个足够大的画布，是第二个已声明的特例。 */
  --xgz-admin-media-dialog-width: 900px;
  --xgz-admin-icon-control-size: 32px;
  --xgz-admin-icon-glyph-size: 20px;
  --xgz-admin-control-height: 36px;
  --xgz-admin-control-radius: 6px;
  --xgz-admin-control-font-size: 13px;
  --xgz-admin-control-line-height: 20px;
  --xgz-admin-control-padding: 0 14px;
}
/* The related drawer is the fourth detail surface; it shares the button system. */
:is(.xgz-prd-layout, .xgz-catalog-drawer, .xgz-prd-dialog, .xgz-crop-overlay, .xgz-related-drawer, .xgz-image-uploader, .xgz-image-viewer, .xgz-date-picker) .xgz-admin-button {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  height: var(--xgz-admin-control-height);
  min-height: var(--xgz-admin-control-height);
  margin: 0;
  padding: var(--xgz-admin-control-padding);
  border: 1px solid var(--xgz-admin-border);
  border-radius: var(--xgz-admin-control-radius);
  background: #fff;
  color: var(--xgz-admin-ink);
  font-family: inherit;
  font-size: var(--xgz-admin-control-font-size);
  font-weight: 600;
  line-height: var(--xgz-admin-control-line-height);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
:is(.xgz-prd-layout, .xgz-catalog-drawer, .xgz-prd-dialog, .xgz-crop-overlay, .xgz-related-drawer, .xgz-image-uploader) .xgz-admin-button--primary {
  background: var(--xgz-admin-blue);
  border-color: var(--xgz-admin-blue);
  color: #fff;
}
:is(.xgz-prd-layout, .xgz-catalog-drawer, .xgz-prd-dialog, .xgz-crop-overlay, .xgz-related-drawer, .xgz-image-uploader) .xgz-admin-button--danger {
  background: #b42318;
  border-color: #b42318;
  color: #fff;
}
:is(.xgz-prd-layout, .xgz-catalog-drawer, .xgz-prd-dialog, .xgz-crop-overlay, .xgz-related-drawer, .xgz-image-uploader, .xgz-image-viewer, .xgz-date-picker) .xgz-admin-button--text {
  padding: 0;
  border-color: transparent;
  background: transparent;
  color: var(--xgz-admin-blue);
}
:is(.xgz-prd-layout, .xgz-catalog-drawer, .xgz-prd-dialog, .xgz-crop-overlay, .xgz-related-drawer, .xgz-image-uploader, .xgz-date-picker) .xgz-admin-button--icon {
  width: var(--xgz-admin-control-height);
  padding: 0;
}
:is(.xgz-prd-layout, .xgz-catalog-drawer, .xgz-prd-dialog, .xgz-crop-overlay, .xgz-related-drawer, .xgz-image-uploader) .xgz-admin-button--compact-icon {
  width: 28px;
  min-width: 28px;
  height: 28px;
  min-height: 28px;
  padding: 0;
}
:is(.xgz-prd-layout, .xgz-catalog-drawer, .xgz-prd-dialog, .xgz-crop-overlay, .xgz-related-drawer, .xgz-image-uploader) .xgz-admin-button--compact-icon svg {
  width: 14px;
  height: 14px;
}
:is(.xgz-prd-layout, .xgz-catalog-drawer, .xgz-prd-dialog, .xgz-crop-overlay, .xgz-related-drawer, .xgz-image-uploader) .xgz-admin-button:disabled {
  opacity: .55;
  cursor: not-allowed;
}
:is(.xgz-prd-layout, .xgz-catalog-drawer, .xgz-prd-dialog, .xgz-crop-overlay, .xgz-related-drawer, .xgz-image-uploader, .xgz-image-viewer) .xgz-admin-button:focus-visible {
  outline: 2px solid var(--xgz-admin-blue);
  outline-offset: 2px;
}
/* The detail action bar (drawer toolbar / related toolbar / dialog head) always
   shows the same quiet pair: a soft square with no border and one glyph size for
   refresh and close, so the two utility actions stop competing with the title.
   Scoped to those three containers; inline icon actions (order-number copy,
   notification bell) keep their own text and page treatment. */
:is(.xgz-catalog-drawer__toolbar, .xgz-related-toolbar, .xgz-prd-dialog__head) .xgz-admin-actions {
  gap: 6px;
}
:is(.xgz-catalog-drawer__toolbar, .xgz-related-toolbar, .xgz-prd-dialog__head) .xgz-admin-button--icon {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--xgz-admin-icon-control-size);
  min-width: var(--xgz-admin-icon-control-size);
  height: var(--xgz-admin-icon-control-size);
  min-height: var(--xgz-admin-icon-control-size);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--xgz-admin-control-radius);
  background: #f1f4f9;
  color: #40506a;
  font-family: inherit;
  font-size: var(--xgz-admin-control-font-size);
  font-weight: 600;
  line-height: var(--xgz-admin-control-line-height);
  text-decoration: none;
  white-space: nowrap;
}
:is(.xgz-catalog-drawer__toolbar, .xgz-related-toolbar, .xgz-prd-dialog__head) .xgz-admin-button--icon:hover {
  background: #e4e9f1;
  color: var(--xgz-admin-ink);
}
:is(.xgz-catalog-drawer__toolbar, .xgz-related-toolbar, .xgz-prd-dialog__head) .xgz-admin-button--icon:active {
  background: #d7dee9;
}
:is(.xgz-catalog-drawer__toolbar, .xgz-related-toolbar, .xgz-prd-dialog__head) .xgz-admin-button--icon .material-symbols-outlined {
  font-size: var(--xgz-admin-icon-glyph-size);
}
/* The home-config drawer labels its close action with text instead of a glyph;
   it keeps the same surface but grows to its label. */
:is(.xgz-catalog-drawer__toolbar, .xgz-related-toolbar, .xgz-prd-dialog__head) .xgz-admin-button--icon.xgz-home-drawer__close {
  width: auto;
  min-width: var(--xgz-admin-icon-control-size);
  padding: 0 9px;
}
/* An enabled control must read as enabled. Unfold's disabled branch bakes
   opacity-50/cursor-not-allowed into the class list and the runtime only clears
   the attribute, so the faded look used to survive being re-enabled. */
:is(.xgz-prd-layout, .xgz-catalog-drawer, .xgz-prd-dialog, .xgz-crop-overlay, .xgz-related-drawer, .xgz-image-uploader, .xgz-image-viewer) .xgz-admin-button:not(:disabled) {
  opacity: 1;
  cursor: pointer;
}
/* Action groups may wrap, but all button variants keep the same outer height. */
.xgz-admin-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
/* Deletion in a row is a text action; the final dialog action is filled red. */
:is(.xgz-prd-layout, .xgz-catalog-drawer, .xgz-prd-dialog) .xgz-admin-button--delete {
  color: var(--xgz-admin-danger, #b42318);
}

/* Boolean filters retain Unfold checkbox geometry, independent of text fields. */
.xgz-prd-filters input[type=checkbox] {
  flex: none;
  box-sizing: border-box;
  width: 14px;
  min-width: 14px;
  height: 14px;
  min-height: 14px;
  margin: 0;
  padding: 0;
  accent-color: var(--xgz-admin-blue);
  background: #fff;
  border: 1px solid var(--xgz-admin-muted);
}
.xgz-prd-filters input[type=checkbox]:checked {
  background: var(--xgz-admin-blue);
  border-color: var(--xgz-admin-blue);
}

/* PRD operations surfaces use a light theme, including Unfold widgets when
   the surrounding native admin has its dark preference enabled. */
:is(.xgz-prd-layout, .xgz-catalog-drawer) .xgz-admin-field:not([type=checkbox]):not([type=radio]) {
  background-color: #fff !important;
  color: var(--xgz-admin-ink) !important;
  color-scheme: light;
}

/* Refresh and close are both Material Symbols now. The former text glyph (×,
   U+00D7) rode the math axis and sat ~2px below the line-box centre in system
   fonts, so it never shared an optical centre with the refresh icon — and the
   offset differed between renderers (measured +1.00px at DPR 2, +0.38px at DPR 4
   after compensation). An icon-font glyph is centred by the font designer, so the
   pair is aligned in every environment without a per-font magic offset. */