/* 后台侧栏图标：20×20，SVG 描边仍用 stroke-width=2 */
.navbar-vertical .nav-link-icon {
  width: 20px;
  height: 20px;
}

.navbar-vertical .nav-link-icon .icon {
  display: block;
  width: 20px;
  height: 20px;
}

.admin-category-filter {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.admin-category-filter-label {
  flex: 0 0 auto;
  font-weight: 600;
  white-space: nowrap;
}

.admin-category-filter-groups {
  display: flex;
  flex: 1 1 100%;
  flex-direction: column;
  gap: .5rem;
}

.admin-category-filter-options {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
}

/* 选中/hover 底与工作台筛选 pill 同尺度：20 行高 + 2×2 padding + 1×2 透明边框 = 26px */
.admin-category-filter-option {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--tblr-body-color);
  font-size: 14px;
  line-height: 20px;
  text-decoration: none;
  white-space: nowrap;
}

.admin-category-filter-option:hover,
.admin-category-filter-option:focus {
  color: var(--tblr-primary);
  background: var(--tblr-primary-lt);
  text-decoration: none;
}

.admin-category-filter-option.active {
  color: var(--tblr-primary);
  background: var(--tblr-primary-lt);
}

:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {
  --app-font-sans: -apple-system, "PingFang SC", "Helvetica Neue", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", SimSun, Arial, sans-serif;
  --tblr-font-sans-serif: var(--app-font-sans);
  --tblr-body-font-family: var(--app-font-sans);
}

/* 只在后台布局生效：admin.css 会通过 stylesheet_link_tag :app 被所有布局
   一起加载，选择器必须用 :has(.navbar-vertical) 锁范围，避免再泄漏到用户端。
   不能在 html 上写 scrollbar-gutter: stable——Blink 会给根元素两侧各留约
   15px（computed margin-left: 15px）。侧栏是 position:fixed; left:0，不跟着
   这份位移走；.page-wrapper 是文档流，会被挤右，侧栏和「仪表盘」顶栏之间
   露出一条 body 底色缝。margin-left: 0 同时覆盖 Tabler 的
   :root { margin-left: calc(100vw - 100%) }，避免去掉 stable 后又被那条
   滚动条补偿挤出同样的缝。后台是固定侧栏而非居中布局，有无滚动条时
   内容只在右侧收缩，不必再用根元素补偿防跳动。 */
html:has(.navbar-vertical) {
  margin-left: 0;
}

body {
  font-family: -apple-system, "PingFang SC", "Helvetica Neue", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", SimSun, Arial, sans-serif;
}

/* 后台左上角品牌位：沿用 Tabler 的紧凑横向 Logo 比例，不改变侧栏导航结构。 */
.navbar-vertical .navbar-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 72px;
  margin: 0;
  padding: 16px 20px;
}

.navbar-vertical .admin-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  text-decoration: none;
}

.navbar-vertical .admin-brand:hover,
.navbar-vertical .admin-brand:focus-visible {
  color: #fff;
  text-decoration: none;
}

.admin-brand-mark {
  display: block;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  color: #fff;
}

.admin-brand-mark svg {
  display: block;
  width: 100%;
  height: 100%;
}

.admin-brand-copy {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  line-height: 1;
}

.admin-brand-name {
  color: #fff;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 32px;
  white-space: nowrap;
}

@media (max-width: 991.98px) {
  .navbar-vertical .navbar-brand {
    height: auto;
    padding: 12px 0;
    justify-content: flex-start;
  }

  .admin-brand-mark {
    flex-basis: 30px;
    width: 30px;
    height: 30px;
  }

  .admin-brand-name {
    font-size: 19px;
    line-height: 30px;
  }
}

/* 后台 layout 不加载 main.css；同样隐藏 Turbo Drive 顶栏进度条。 */
.turbo-progress-bar {
  display: none;
}

.admin-listing-filter > [class*="col-"] {
  min-width: 8.5rem;
}

.admin-listing-filter > .col-12 {
  min-width: 0;
}

.admin-listing-filter .form-control,
.admin-listing-filter .form-select {
  min-width: 0;
  width: 100%;
}

.admin-listing-filter .form-control {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 后台列表筛选分组标题：在同一张筛选卡里区分“我方归类 / 上游原始 / 其他条件”，
   避免我方映射结果和上游原始值被当成同一组条件。 */
.admin-listing-filter > .admin-listing-filter-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--tblr-secondary);
}

.admin-listing-filter > .admin-listing-filter-group::after {
  content: "";
  flex: 1 1 auto;
  border-top: 1px solid var(--tblr-border-color);
}

.admin-listing-table {
  width: 100%;
  table-layout: auto;
}

/* 后台详情卡片的标题使用 --tblr-card-spacer-x，而 Tabler 表格首列默认更靠左。
   将首个字段标题与卡片标题对齐；列表 card-table 保持原有紧凑列布局。 */
.page-body .card > .table-responsive > .table.table-vcenter:not(.card-table) > tbody > tr > th:first-child,
.page-body .card > .table-responsive > .table.table-vcenter:not(.card-table) > thead > tr > th:first-child {
  padding-left: var(--tblr-card-spacer-x);
}

/* 卡片有圆角但不会裁切内部表格。第一格 thead 是直角、底色又和页面一样，
   会盖住左上角边框和阴影，看起来缺一块。圆角加在已有 overflow-x:auto 的
   .table-responsive 上，把表头裁进卡片内圆角；不要给 .card 加 overflow:hidden，
   以免裁掉行内下拉。 */
html:has(.navbar-vertical) .page-body .card > .table-responsive:first-child {
  border-top-left-radius: var(--tblr-card-inner-border-radius);
  border-top-right-radius: var(--tblr-card-inner-border-radius);
}

html:has(.navbar-vertical) .page-body .card > .table-responsive:last-child {
  border-bottom-left-radius: var(--tblr-card-inner-border-radius);
  border-bottom-right-radius: var(--tblr-card-inner-border-radius);
}

.admin-list-loading {
  position: relative;
}

.admin-list-loading.is-loading .admin-listing-table tbody {
  visibility: hidden;
}

.admin-list-loading.is-loading .admin-listing-table tbody td {
  border-color: transparent;
  background: transparent;
}

.admin-list-loading.is-loading .card-footer,
.admin-list-loading.is-loading .pagination {
  pointer-events: none;
}

.admin-list-loading .media-list-loading-row td {
  height: auto;
  padding: 20px 0 28px;
  text-align: center;
  vertical-align: top;
  background: #fff;
}

.admin-list-loading .media-list-loading-indicator {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 2;
  display: none;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.admin-list-loading.is-loading .media-list-loading-indicator:not([hidden]) {
  display: block;
}

.cheetah-spin-dot {
  position: relative;
  display: inline-block;
  width: 1em;
  height: 1em;
  color: var(--tblr-primary, #3855d5);
  font-size: 24px;
}

.cheetah-spin-dot-spin {
  transform: rotate(45deg);
  animation: cheetah-spin-rotate 1.2s linear infinite;
}

.cheetah-spin-dot-item {
  position: absolute;
  display: block;
  width: 0.45em;
  height: 0.45em;
  background: currentColor;
  border-radius: 100%;
  transform: scale(0.75);
  transform-origin: 50% 50%;
  opacity: 0.3;
  animation: cheetah-spin-move 1s linear infinite alternate;
}

.cheetah-spin-dot-item:nth-child(1) { top: 0; left: 0; animation-delay: 0s; }
.cheetah-spin-dot-item:nth-child(2) { top: 0; right: 0; animation-delay: 0.4s; }
.cheetah-spin-dot-item:nth-child(3) { right: 0; bottom: 0; animation-delay: 0.8s; }
.cheetah-spin-dot-item:nth-child(4) { bottom: 0; left: 0; animation-delay: 1.2s; }

@keyframes cheetah-spin-rotate {
  to { transform: rotate(405deg); }
}

@keyframes cheetah-spin-move {
  to { opacity: 1; }
}

/* 媒体列表顶部的只读同步摘要：轻量一行，窄屏自行换行，不做成 KPI 卡片。 */
.admin-media-sync-health {
  font-size: 13px;
  line-height: 1.5;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.admin-media-sync-health-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 1rem;
  row-gap: 0.25rem;
}

.admin-media-sync-health-counts {
  display: inline-flex;
  flex-wrap: wrap;
  column-gap: 0.75rem;
  row-gap: 0.25rem;
}

.admin-media-sync-health-reason,
.admin-media-sync-health-note {
  margin-top: 0.25rem;
}

/* Reuse the membership help component on admin business summary cards. */
button.membership-help-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: #b0b6c3;
  font-size: inherit;
  line-height: 1;
  transition: color 0.15s ease;
}

button.membership-help-trigger:hover,
button.membership-help-trigger:focus-visible {
  color: #5a65e9;
}

button.membership-help-trigger:focus-visible {
  border-radius: 50%;
  outline: 2px solid rgba(90, 101, 233, 0.35);
  outline-offset: 1px;
}

/* 统计卡片保持既有列宽，只压缩纵向留白。 */
.admin-update-events-summary-card .card-body {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

/* 卡片可点击筛选，但数字维持统计信息的视觉，而非链接默认样式。 */
.admin-update-events-summary-link,
.admin-update-events-summary-link:hover,
.admin-update-events-summary-link:focus {
  color: inherit;
  text-decoration: none;
}