/**
 * 設計準則預覽頁 — 與全站 themes.css 並存
 */

.container-fluid {
  max-width: 1600px;
}
:root {
  --dr-surface: #f4f6f9;
  --dr-header-bg: #1e293b;
  --dr-header-fg: #f8fafc;
  --dr-banner-from: #0f172a;
  --dr-banner-to: #1d4ed8;
  --dr-callout-radius: 0.5rem;
  --dr-callout-border: 4px;
  --dr-callout-info: #3b82f6;
  --dr-callout-info-bg: rgba(59, 130, 246, 0.12);
  --dr-callout-warning: #f97316;
  --dr-callout-warning-bg: rgba(249, 115, 22, 0.12);
  --dr-callout-success: #22c55e;
  --dr-callout-success-bg: rgba(34, 197, 94, 0.12);
  --dr-callout-danger: #ef4444;
  --dr-callout-danger-bg: rgba(239, 68, 68, 0.12);
  --dr-body-fs: 1.0625rem;
  --dr-table-head: #1e293b;
}

html {
  font-size: 17px;
}

body.design-reference-body {
  min-height: 100vh;
  background: var(--dr-surface);
  font-size: var(--dr-body-fs);
  line-height: 1.55;
  overflow-x: clip;
}

/* 全域 badge：膠囊型 + fs-6（1rem） */
.design-reference-body .badge {
  font-size: 1rem;
  border-radius: 50rem !important;
}

.design-reference-body .h1,
.design-reference-body h1 {
  font-size: clamp(1.65rem, 2.8vw, 2rem);
}

.design-reference-body .h2,
.design-reference-body h2,
.design-reference-body .h3,
.design-reference-body h3,
.design-reference-body .h5,
.design-reference-body h5 {
  font-weight: 600;
}

.design-reference-body .form-label,
.design-reference-body .btn {
  font-size: 1rem;
}

.dr-nav-fs .nav-link {
  font-size: 1.05rem;
}

.dr-meta-fs {
  font-size: 0.95rem;
}

.dr-footer-fs {
  font-size: 0.95rem;
}

.dr-topbar {
  background: var(--dr-header-bg);
  color: var(--dr-header-fg);
}

.dr-topbar .navbar-brand,
.dr-topbar .nav-link {
  color: var(--dr-header-fg) !important;
}

.dr-topbar .nav-link:hover {
  opacity: 0.88;
}

.dr-topbar .dropdown-menu {
  font-size: 0.98rem;
  /* 預設／不支援毛玻璃：接近原 dropdown-menu-dark 的不透明深色 */
  background-color: rgba(30, 41, 59, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 0.5rem 1.25rem rgba(15, 23, 42, 0.35);
  /* 子選單 hover／focus／active：覆寫 Bootstrap 亮藍，改為半透明淺色高亮 */
  --bs-dropdown-link-color: var(--dr-header-fg);
  --bs-dropdown-link-hover-color: #fff;
  --bs-dropdown-link-hover-bg: rgba(248, 250, 252, 0.12);
  --bs-dropdown-link-active-color: #fff;
  --bs-dropdown-link-active-bg: rgba(59, 130, 246, 0.38);
  --bs-dropdown-link-focus-color: #fff;
  --bs-dropdown-link-focus-bg: rgba(248, 250, 252, 0.14);
}

.dr-topbar .dropdown-menu .dropdown-item:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.45);
}

/* 頂列子選單毛玻璃：僅小面積下拉，blur 適度以控制合成成本 */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  @media (prefers-reduced-motion: no-preference) {
    .dr-topbar .dropdown-menu {
      background-color: rgba(30, 41, 59, 0.72);
      -webkit-backdrop-filter: blur(12px);
      backdrop-filter: blur(12px);
    }
  }
}

/* 頂列：品牌固定左側；選單佔滿右側剩餘寬度，項目不足時同行靠右，超出時在右側區塊內換行仍靠右 */
.dr-topbar .navbar > .dr-topbar-inner {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0.5rem;
}

.dr-topbar .navbar-brand {
  flex: 0 0 auto;
  max-width: 100%;
}

@media (min-width: 992px) {
  .dr-topbar {
    --dr-topbar-row-height: 3rem;
  }

  .dr-topbar .navbar > .dr-topbar-inner {
    align-items: flex-start;
  }

  .dr-topbar .navbar-brand {
    min-height: var(--dr-topbar-row-height);
    padding-top: 0;
    padding-bottom: 0;
  }

  .dr-topbar .dr-topbar-nav-wrap {
    flex: 1 1 0;
    min-width: 0;
    min-height: var(--dr-topbar-row-height);
    justify-content: flex-end;
    align-items: center;
  }

  .dr-topbar .dr-topbar-nav-wrap > .navbar-nav {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    align-content: flex-start;
    width: 100%;
    min-height: var(--dr-topbar-row-height);
    margin-left: 0 !important;
    margin-bottom: 0 !important;
  }

  .dr-topbar .dr-topbar-nav-wrap .nav-item {
    flex-shrink: 0;
    display: flex;
    align-items: center;
  }

  .dr-topbar .dr-topbar-nav-wrap .nav-link {
    display: inline-flex;
    align-items: center;
    min-height: var(--dr-topbar-row-height);
    padding-top: 0;
    padding-bottom: 0;
    box-sizing: border-box;
  }
}

@media (max-width: 991.98px) {
  .dr-topbar .navbar > .dr-topbar-inner {
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
  }

  .dr-topbar .navbar-toggler {
    margin-left: auto;
  }

  .dr-topbar .dr-topbar-nav-wrap {
    flex: 1 1 100%;
  }
}

.dr-meta-bar {
  border-bottom: 1px solid rgba(248, 250, 252, 0.12);
}

.dr-meta-bar .meta-switch-link {
  opacity: .75;
  transition: opacity .15s, background-color .15s;
  border-radius: .25rem;
  padding: .5rem .5rem;
}
.dr-meta-bar .meta-switch-link:hover {
  opacity: 1;
  background-color: rgba(255, 255, 255, .15);
}

.dr-banner {
  min-height: 120px;
  background: linear-gradient(110deg, var(--dr-banner-from), var(--dr-banner-to));
  color: #fff;
  display: flex;
  align-items: center;
}

/* 有橫幅圖時：與下方主內容同欄寬，白底卡片（非全視窗滿寬） */
.dr-banner--inpage {
  min-height: 0;
  padding: 0;
  background: transparent;
  align-items: stretch;
}

.dr-banner-hero-link {
  display: block;
  width: 100%;
  height: clamp(104px, 15vh, 260px);
  line-height: 0;
  overflow: hidden;
}

.dr-banner-img-full {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

@media (min-width: 768px) {
  .dr-banner-hero-link {
    height: clamp(120px, 16vh, 280px);
  }
}

.dr-banner-media {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.dr-banner-media a {
  display: inline-flex;
  align-items: center;
  border-radius: 0.5rem;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.dr-banner-media a:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.3);
}

.dr-banner-media img {
  display: block;
  max-height: 72px;
  width: auto;
  max-width: min(100%, 420px);
}

@media (min-width: 768px) {
  .dr-banner-media img {
    max-height: 88px;
  }
}

.dr-banner-media.dr-banner-media--inpage {
  display: block;
  width: 100%;
  background: #fff;
  border-radius: 0.5rem;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
  overflow: hidden;
}

.dr-banner-media.dr-banner-media--inpage > a,
.dr-banner-media.dr-banner-media--inpage a.dr-banner-hero-link {
  display: block;
  width: 100%;
  max-width: 100%;
  border-radius: 0;
  box-shadow: none;
}

.dr-banner-media.dr-banner-media--inpage > a:hover,
.dr-banner-media.dr-banner-media--inpage a.dr-banner-hero-link:hover {
  opacity: 0.96;
}

.dr-banner-media.dr-banner-media--inpage img.dr-banner-img-full {
  max-width: none;
}

.dr-banner-title {
  font-size: clamp(1.25rem, 2.8vw, 1.9rem);
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.dr-banner-caption {
  font-size: 1rem;
  opacity: 0.88;
}

@media (max-width: 767.98px) {
  .dr-banner:not(.dr-banner--inpage) {
    min-height: 96px;
  }
}

.dr-logo {
  max-height: 40px;
  width: auto;
}

.dr-logo-png {
  max-height: 44px;
  width: auto;
  object-fit: contain;
}

@media (min-width: 992px) {
  .dr-logo-png {
    max-height: 48px;
  }
}

/* Alert（設計頁示範：含圖示） */
.dr-alert .dr-alert__icon {
  font-size: 1.15rem;
  line-height: 1;
  opacity: 0.95;
  vertical-align: -0.15em;
}

/* 麵包屑 */
.dr-breadcrumb {
  padding: 0.5rem 0.85rem;
  background: #fff;
  border-radius: 0.65rem;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
  margin-bottom: 1.25rem !important;
}

.dr-breadcrumb .breadcrumb {
  margin-bottom: 0;
  align-items: center;
  column-gap: 0;
  row-gap: 0.25rem;
}

.dr-breadcrumb .breadcrumb-item {
  display: flex;
  align-items: center;
  line-height: 1.35;
}

.dr-breadcrumb .breadcrumb-item + .breadcrumb-item {
  padding-left: 0.3rem;
}

.dr-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  float: none;
  display: inline-flex;
  align-items: center;
  align-self: center;
  flex-shrink: 0;
  padding-right: 0.3rem;
  padding-left: 0;
  margin-right: 0;
  margin-top: 0;
  line-height: 1;
  min-height: 1.25em;
  color: #94a3b8;
  font-weight: 500;
  vertical-align: middle;
}

.dr-breadcrumb .breadcrumb-item .dr-breadcrumb__segment {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  line-height: 1.35;
}

.dr-breadcrumb .breadcrumb-item a.dr-breadcrumb__segment {
  color: #2563eb;
  text-decoration: none;
  font-weight: 500;
  padding: 0.2rem 0.28rem;
  margin: -0.2rem 0;
  border-radius: 0.35rem;
  transition: background 0.12s ease, color 0.12s ease;
}

.dr-breadcrumb .breadcrumb-item a.dr-breadcrumb__segment:hover {
  background: rgba(37, 99, 235, 0.1);
  color: #1d4ed8;
}

.dr-breadcrumb .breadcrumb-item.active {
  color: #475569;
  font-weight: 600;
  display: flex;
  align-items: center;
  line-height: 1.35;
}

.dr-breadcrumb .dr-breadcrumb__icon {
  flex-shrink: 0;
  font-size: 1em;
  line-height: 1;
  opacity: 0.92;
}

.dr-breadcrumb .dr-breadcrumb__text {
  line-height: inherit;
}

/* 頁面標題列：操作區整列靠右，多按鈕時「返回列表」置於最右（DOM 順序置於末） */
.dr-page-heading {
  width: 100%;
}

.dr-page-heading__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  width: 100%;
}

@media (min-width: 768px) {
  .dr-page-heading__actions {
    width: auto;
    max-width: 100%;
    margin-left: auto;
    flex-shrink: 0;
  }
}

/* 詳情頁：卡片內導讀 */
.dr-card-intro {
  margin-bottom: 0;
  padding: 0.65rem 0.9rem;
  font-size: 0.9rem;
  line-height: 1.55;
  color: #475569;
  background: rgba(241, 245, 249, 0.85);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 0.5rem;
}

.dr-item-show-card .card-body {
  padding-top: 1.35rem;
}

/* 詳情頁：唯讀欄位群組 */
.dr-item-show__section-title {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: none;
  color: #334155;
  margin-bottom: 0.75rem;
  padding-bottom: 0.45rem;
  border-bottom: 2px solid rgba(37, 99, 235, 0.45);
}

.dr-item-show {
  border-radius: 0.55rem;
  border: 1px solid rgba(15, 23, 42, 0.1);
  overflow: hidden;
  background: #fff;
}

.dr-item-show__row {
  display: grid;
  grid-template-columns: minmax(6.5rem, 10.5rem) 1fr;
  gap: 0.4rem 1rem;
  padding: 0.85rem 1rem;
  align-items: center;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  background: #fff;
}

.dr-item-show__row:last-child {
  border-bottom: none;
}

.dr-item-show__row:nth-child(even) {
  background: rgba(241, 245, 249, 0.65);
}

.dr-item-show__label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #64748b;
  line-height: 1.35;
}

.dr-item-show__label-icon {
  flex-shrink: 0;
  font-size: 0.95rem;
  opacity: 0.88;
  color: #94a3b8;
}

.dr-item-show__value {
  font-size: 1.02rem;
  color: #0f172a;
  line-height: 1.5;
  word-break: break-word;
}

.dr-item-show__value--accent {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #1e40af;
}

.dr-item-show__value--muted {
  color: #475569;
}

.dr-item-show__link {
  font-weight: 500;
  text-decoration: none;
  color: #1d4ed8;
  border-bottom: 1px solid rgba(37, 99, 235, 0.35);
}

.dr-item-show__link:hover {
  color: #1e3a8a;
  border-bottom-color: #1e3a8a;
}

.dr-item-show--remark .dr-item-show__row {
  grid-template-columns: 1fr;
  align-items: start;
  background: #fff;
}

.dr-item-show__value--remark {
  font-size: 0.98rem;
  color: #334155;
  line-height: 1.6;
  white-space: pre-wrap;
}

@media (max-width: 575.98px) {
  .dr-item-show__row {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 0.25rem;
  }

  .dr-item-show__label {
    padding-bottom: 0.15rem;
    border-bottom: 1px dashed rgba(148, 163, 184, 0.45);
  }
}

/* 分頁 */
.dr-pagination .pagination {
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-bottom: 0;
}

.dr-pagination .page-link {
  border-radius: 0.45rem;
  border: 1px solid rgba(15, 23, 42, 0.12);
  padding: 0.4rem 0.75rem;
  font-size: 0.98rem;
  color: #334155;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.dr-pagination .page-item.active .page-link {
  background: linear-gradient(180deg, #2563eb, #1d4ed8);
  border-color: #1d4ed8;
  color: #fff;
  font-weight: 600;
}

.dr-pagination .page-item.disabled .page-link {
  background: #f1f5f9;
  color: #94a3b8;
}

.dr-pagination .page-link:hover:not(.disabled) {
  background: #eff6ff;
  border-color: #93c5fd;
  color: #1e40af;
}

.dr-pagination nav {
  width: 100%;
}

.dr-pagination .dr-pagination-nav {
  align-items: center;
}

.dr-pagination .dr-pagination-nav > .d-none.d-sm-flex {
  align-items: center;
  min-height: 2.5rem;
}

.dr-pagination .dr-pagination-summary p,
.dr-pagination .small.text-muted {
  font-size: 0.95rem !important;
  margin-bottom: 0;
  line-height: 1.5;
}

.dr-pagination .dr-pagination-pages .pagination {
  align-items: center;
}

/* 資料表 */
.dr-table-panel {
  border-radius: 0.65rem;
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.07);
  background: #fff;
}

/* 圓角改由 thead/tbody 第一、末列的角落 th/td 承擔 */
.dr-table-panel .dr-data-table thead tr:first-child th:first-child {
  border-top-left-radius: calc(0.65rem - 1px);
}
.dr-table-panel .dr-data-table thead tr:first-child th:last-child {
  border-top-right-radius: calc(0.65rem - 1px);
}
.dr-table-panel .dr-data-table tbody tr:last-child td:first-child {
  border-bottom-left-radius: calc(0.65rem - 1px);
}
.dr-table-panel .dr-data-table tbody tr:last-child td:last-child {
  border-bottom-right-radius: calc(0.65rem - 1px);
}

.dr-data-table {
  font-size: 1rem;
  margin-bottom: 0;
  --dr-table-cell-vline: rgba(15, 23, 42, 0.12);
}

.dr-data-table thead th + th,
.dr-data-table tbody td + td {
  border-left: 1px solid var(--dr-table-cell-vline);
}

.dr-data-table thead th {
  background: linear-gradient(180deg, #334155, var(--dr-table-head));
  color: #f8fafc;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-bottom: none;
  padding-top: 0.85rem;
  padding-bottom: 0.85rem;
  white-space: normal;
  word-break: break-word;
}

.dr-data-table tbody tr {
  transition: background 0.12s ease;
}

.dr-data-table.table-striped > tbody > tr:nth-of-type(odd) > * {
  --bs-table-accent-bg: rgba(241, 245, 249, 0.65);
}

.dr-data-table tbody tr:hover > * {
  background-color: rgba(219, 234, 254, 0.55) !important;
}

.dr-data-table td,
.dr-data-table th {
  padding: 0.75rem 1rem;
  vertical-align: middle;
}

/* 無資料列（與列表同表頭樣式，tbody 單列 colspan） */
.dr-data-table__empty {
  font-size: 1rem;
  line-height: 1.65;
}

.dr-data-table.dr-data-table--empty tbody tr > td {
  border-top: none;
}

/* Callout（說明區塊） */
.dr-callout {
  border-radius: var(--dr-callout-radius);
  overflow: hidden;
  background: #fff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-left: var(--dr-callout-border) solid var(--dr-callout-accent, #64748b);
}

.dr-callout__head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1rem;
  background: var(--dr-callout-head-bg, rgba(100, 116, 139, 0.1));
  cursor: default;
}

.dr-callout__head[data-bs-toggle="collapse"] {
  cursor: pointer;
}

.dr-callout__head .dr-callout__chevron {
  margin-left: auto;
  transition: transform 0.2s ease;
}

.dr-callout__head[aria-expanded="false"] .dr-callout__chevron,
.dr-callout__head.collapsed .dr-callout__chevron {
  transform: rotate(-90deg);
}

button.dr-callout__head {
  background: var(--dr-callout-head-bg, rgba(100, 116, 139, 0.1));
  border: 0;
  width: 100%;
  text-align: start;
  font: inherit;
  color: inherit;
}

.dr-callout__icon {
  font-size: 1.15rem;
  color: var(--dr-callout-accent, #64748b);
}

.dr-callout__title {
  font-weight: 600;
  font-size: 1rem;
  color: #0f172a;
}

.dr-callout__body {
  padding: 0.85rem 1rem 1rem;
  font-size: 1rem;
  color: #334155;
  line-height: 1.55;
}

.dr-callout--info {
  --dr-callout-accent: var(--dr-callout-info);
  --dr-callout-head-bg: var(--dr-callout-info-bg);
}

.dr-callout--warning {
  --dr-callout-accent: var(--dr-callout-warning);
  --dr-callout-head-bg: var(--dr-callout-warning-bg);
}

.dr-callout--success {
  --dr-callout-accent: var(--dr-callout-success);
  --dr-callout-head-bg: var(--dr-callout-success-bg);
}

.dr-callout--danger {
  --dr-callout-accent: var(--dr-callout-danger);
  --dr-callout-head-bg: var(--dr-callout-danger-bg);
}

/* 統計卡 */
.dr-stat-card {
  border-radius: var(--dr-callout-radius);
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: #fff;
  padding: 1.1rem 1.2rem;
  height: 100%;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.dr-stat-card:hover {
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.1);
}

/* 卡片型：橫向（圖示左、數值與說明佔滿右側） */
.dr-stat-card--row .dr-stat-card__row {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  min-height: 100%;
}

.dr-stat-card__icon-side {
  flex-shrink: 0;
  padding-top: 0.1rem;
}

.dr-stat-card__icon-bubble {
  width: 3.1rem;
  height: 3.1rem;
  border-radius: 0.7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.45rem;
  line-height: 1;
  background: rgba(15, 23, 42, 0.06);
  color: #334155;
}

.dr-stat-card__icon-bubble--primary {
  background: rgba(37, 99, 235, 0.12);
  color: #1d4ed8;
}

.dr-stat-card__icon-bubble--success {
  background: rgba(22, 163, 74, 0.12);
  color: #15803d;
}

.dr-stat-card__icon-bubble--warning {
  background: rgba(234, 88, 12, 0.12);
  color: #c2410c;
}

.dr-stat-card__icon-bubble--yellow {
  background: rgba(202, 138, 4, 0.14);
  color: #a16207;
}

.dr-stat-card__icon-bubble--danger {
  background: rgba(220, 38, 38, 0.12);
  color: #b91c1c;
}

.dr-stat-card__icon-bubble--secondary {
  background: rgba(100, 116, 139, 0.15);
  color: #475569;
}

.dr-stat-card__icon-bubble--info {
  background: rgba(14, 165, 233, 0.12);
  color: #0369a1;
}

.dr-stat-card__icon-bubble--indigo {
  background: rgba(79, 70, 229, 0.12);
  color: #4338ca;
}

.dr-stat-card__icon-bubble--purple {
  background: rgba(147, 51, 234, 0.12);
  color: #7e22ce;
}

.dr-stat-card__icon-bubble--teal {
  background: rgba(13, 148, 136, 0.12);
  color: #0f766e;
}

.dr-stat-card__icon-bubble--pink {
  background: rgba(219, 39, 119, 0.12);
  color: #be185d;
}

.dr-stat-card__icon-bubble--dark {
  background: rgba(51, 65, 85, 0.14);
  color: #334155;
}

.dr-stat-card__body {
  flex: 1 1 auto;
  min-width: 0;
}

.dr-stat-card__value {
  font-size: clamp(1.45rem, 2.8vw, 1.95rem);
  font-weight: 700;
  color: #0f172a;
  line-height: 1.2;
}

.dr-stat-card__label {
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748b;
  margin-top: 0.35rem;
}

.dr-stat-card__hint {
  font-size: 0.9rem;
  color: #94a3b8;
  margin-top: 0.4rem;
}

/* 篩選查詢（可摺疊）；header 色系由 .design-reference-body .card-header 統一 */

.dr-filter-toggle .bi-chevron-down {
  display: inline-block;
  transition: transform 0.2s ease;
}

.dr-filter-toggle:not(.collapsed) .bi-chevron-down {
  transform: rotate(180deg);
}

a.dr-stat-card--as-button,
button.dr-stat-card--as-button {
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  display: block;
  width: 100%;
  text-align: left;
}

button.dr-stat-card--as-button {
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
}

.dr-stat-card--as-button {
  border-width: 2px;
  border-style: solid;
  padding: 1rem 1.15rem;
  cursor: default;
}

.dr-stat-card--accent-primary {
  border-color: rgba(37, 99, 235, 0.45);
  background: linear-gradient(145deg, #fff, #eff6ff);
}

.dr-stat-card--accent-success {
  border-color: rgba(22, 163, 74, 0.45);
  background: linear-gradient(145deg, #fff, #f0fdf4);
}

.dr-stat-card--accent-secondary {
  border-color: rgba(100, 116, 139, 0.45);
  background: linear-gradient(145deg, #fff, #f8fafc);
}

.dr-stat-card--accent-warning {
  border-color: rgba(234, 88, 12, 0.45);
  background: linear-gradient(145deg, #fff, #fff7ed);
}

.dr-stat-card--accent-yellow {
  border-color: rgba(202, 138, 4, 0.5);
  background: linear-gradient(145deg, #fff, #fefce8);
}

.dr-stat-card--accent-danger {
  border-color: rgba(220, 38, 38, 0.45);
  background: linear-gradient(145deg, #fff, #fef2f2);
}

.dr-stat-card--accent-info {
  border-color: rgba(14, 165, 233, 0.45);
  background: linear-gradient(145deg, #fff, #f0f9ff);
}

.dr-stat-card--accent-indigo {
  border-color: rgba(79, 70, 229, 0.45);
  background: linear-gradient(145deg, #fff, #eef2ff);
}

.dr-stat-card--accent-purple {
  border-color: rgba(147, 51, 234, 0.45);
  background: linear-gradient(145deg, #fff, #faf5ff);
}

.dr-stat-card--accent-teal {
  border-color: rgba(13, 148, 136, 0.45);
  background: linear-gradient(145deg, #fff, #f0fdfa);
}

.dr-stat-card--accent-pink {
  border-color: rgba(219, 39, 119, 0.45);
  background: linear-gradient(145deg, #fff, #fdf2f8);
}

.dr-stat-card--accent-dark {
  border-color: rgba(51, 65, 85, 0.45);
  background: linear-gradient(145deg, #fff, #f1f5f9);
}

.dr-stat-card--as-button .dr-stat-card__btn-text .dr-stat-card__label,
.dr-stat-card--as-button .dr-stat-card__btn-text .dr-stat-card__value {
  color: #0f172a;
}

.dr-stat-card--as-button .dr-stat-card__btn-text .dr-stat-card__hint {
  color: #64748b;
}

.dr-stat-card__btn-row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.dr-stat-card__btn-icon-wrap {
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
  border-radius: 0.65rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.45rem;
  background: rgba(15, 23, 42, 0.06);
}

.dr-stat-card--accent-primary .dr-stat-card__btn-icon-wrap {
  background: rgba(37, 99, 235, 0.12);
  color: #1d4ed8;
}

.dr-stat-card--accent-success .dr-stat-card__btn-icon-wrap {
  background: rgba(22, 163, 74, 0.12);
  color: #15803d;
}

.dr-stat-card--accent-secondary .dr-stat-card__btn-icon-wrap {
  background: rgba(100, 116, 139, 0.15);
  color: #475569;
}

.dr-stat-card--accent-warning .dr-stat-card__btn-icon-wrap {
  background: rgba(234, 88, 12, 0.12);
  color: #c2410c;
}

.dr-stat-card--accent-yellow .dr-stat-card__btn-icon-wrap {
  background: rgba(202, 138, 4, 0.14);
  color: #a16207;
}

.dr-stat-card--accent-danger .dr-stat-card__btn-icon-wrap {
  background: rgba(220, 38, 38, 0.12);
  color: #b91c1c;
}

.dr-stat-card--accent-info .dr-stat-card__btn-icon-wrap {
  background: rgba(14, 165, 233, 0.12);
  color: #0369a1;
}

.dr-stat-card--accent-indigo .dr-stat-card__btn-icon-wrap {
  background: rgba(79, 70, 229, 0.12);
  color: #4338ca;
}

.dr-stat-card--accent-purple .dr-stat-card__btn-icon-wrap {
  background: rgba(147, 51, 234, 0.12);
  color: #7e22ce;
}

.dr-stat-card--accent-teal .dr-stat-card__btn-icon-wrap {
  background: rgba(13, 148, 136, 0.12);
  color: #0f766e;
}

.dr-stat-card--accent-pink .dr-stat-card__btn-icon-wrap {
  background: rgba(219, 39, 119, 0.12);
  color: #be185d;
}

.dr-stat-card--accent-dark .dr-stat-card__btn-icon-wrap {
  background: rgba(51, 65, 85, 0.14);
  color: #334155;
}

.dr-stat-card__btn-text .dr-stat-card__value {
  font-size: 1.2rem;
  font-weight: 700;
}

.dr-stat-card__btn-text .dr-stat-card__label {
  margin-top: 0;
  font-size: 0.78rem;
}

.dr-stat-card__pill {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0.35rem 0.65rem;
  border-radius: 2rem;
  background: rgba(15, 23, 42, 0.08);
  color: #0f172a;
}

.dr-stat-card--accent-primary .dr-stat-card__pill {
  background: #2563eb;
  color: #fff;
}

.dr-stat-card--accent-success .dr-stat-card__pill {
  background: #16a34a;
  color: #fff;
}

.dr-stat-card--accent-secondary .dr-stat-card__pill {
  background: #64748b;
  color: #fff;
}

.dr-stat-card--accent-warning .dr-stat-card__pill {
  background: #ea580c;
  color: #fff;
}

.dr-stat-card--accent-yellow .dr-stat-card__pill {
  background: #ca8a04;
  color: #422006;
}

.dr-stat-card--accent-danger .dr-stat-card__pill {
  background: #dc2626;
  color: #fff;
}

.dr-stat-card--accent-info .dr-stat-card__pill {
  background: #0284c7;
  color: #fff;
}

.dr-stat-card--accent-indigo .dr-stat-card__pill {
  background: #4f46e5;
  color: #fff;
}

.dr-stat-card--accent-purple .dr-stat-card__pill {
  background: #9333ea;
  color: #fff;
}

.dr-stat-card--accent-teal .dr-stat-card__pill {
  background: #0d9488;
  color: #fff;
}

.dr-stat-card--accent-pink .dr-stat-card__pill {
  background: #db2777;
  color: #fff;
}

.dr-stat-card--accent-dark .dr-stat-card__pill {
  background: #475569;
  color: #fff;
}

.dr-section-hint {
  font-size: 0.95rem;
}

/* 列表「詳細(跳窗)」Modal */
.dr-item-detail-modal.modal-dialog {
  max-width: min(52rem, calc(100vw - 1.25rem));
}
.dr-item-detail-modal.modal-dialog.modal-xl {
  max-width: min(72rem, calc(100vw - 1.25rem));
}

/* Fix scrollable modal when <form> wraps .modal-body + .modal-footer */
.modal-dialog-scrollable .modal-content > form {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
.modal-dialog-scrollable .modal-content > form > .modal-body {
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0;
}
.modal-dialog-scrollable .modal-content > form > .modal-footer {
  flex-shrink: 0;
}

.dr-item-detail-modal .modal-content {
  border-radius: 0.65rem;
  overflow: hidden;
}

.dr-item-detail-modal__header {
  background: #5c879e;
  color: #f8fafc;
  border-bottom: none;
}

.dr-item-detail-modal__footer {
  background: #f8fafc;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
}

.dr-item-show-modal-callout .dr-callout {
  margin-bottom: 0;
}

/* Modal 內表格：與示範列表同 dr-table-panel + dr-data-table */
.dr-item-detail-modal .dr-table-panel {
  margin-bottom: 0;
}

.dr-item-detail-modal .dr-data-table tbody td:first-child {
  width: 28%;
  max-width: 14rem;
  white-space: nowrap;
}

.dr-item-detail-table__link {
  font-weight: 500;
  text-decoration: none;
  color: #1d4ed8;
  border-bottom: 1px solid rgba(37, 99, 235, 0.35);
}

.dr-item-detail-table__link:hover {
  color: #1e3a8a;
}

.dr-item-detail-modal .dr-item-detail-table__remarks {
  font-size: 0.95rem;
  line-height: 1.55;
  color: #334155;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Modal 內 dr-item-show 表格（帳號維護／廠商編輯：label-value 列，非列表斑馬表） */
.modal .table.dr-item-show {
  border: none;
  border-radius: 0;
  overflow: visible;
  background: transparent;
  --bs-table-border-color: transparent;
  --bs-table-striped-bg: transparent;
  --bs-table-hover-bg: transparent;
}

.modal .table.dr-item-show > :not(caption) > * > * {
  border-top-width: 0;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  box-shadow: none;
}

.modal .table.dr-item-show > tbody > tr:last-child > * {
  border-bottom-width: 0;
}

.modal .table.dr-item-show.table-striped > tbody > tr:nth-of-type(odd) > *,
.modal .table.dr-item-show.table-striped > tbody > tr:nth-of-type(even) > * {
  --bs-table-accent-bg: transparent;
  background-color: transparent !important;
}

.modal .table.dr-item-show tbody tr:hover > * {
  background-color: inherit !important;
}

.modal .table.dr-item-show th.dr-item-show__label {
  display: table-cell;
  width: 34%;
  min-width: 8.5rem;
  max-width: 12.5rem;
  white-space: normal;
  word-break: break-word;
  text-transform: none;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0;
  color: #475569;
  vertical-align: middle;
  background: rgba(241, 245, 249, 0.85) !important;
}

.modal .table.dr-item-show--1-3 th.dr-item-show__label {
  width: 25%;
  max-width: none;
}

.modal .table.dr-item-show td {
  vertical-align: middle;
  word-break: break-word;
  background: #fff !important;
}

.modal .table.dr-item-show tbody td + td {
  border-left: 1px solid rgba(15, 23, 42, 0.08);
}

.modal .table.dr-item-show td .form-control {
  width: 100%;
  min-width: 0;
}

.dr-table-panel.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.modal .dr-data-table.dr-item-show label.error {
  margin-top: 0.35rem;
  margin-bottom: 0;
}

/* 表單型詳情跳窗（帳號維護等）：body 捲動、footer 固定，驗證訊息不擠出按鈕 */
.dr-item-detail-modal--form.modal-dialog {
  max-height: calc(100vh - 2rem);
}

.dr-item-detail-modal--form .modal-content {
  display: flex;
  flex-direction: column;
  max-height: min(90vh, calc(100vh - 2rem));
}

.dr-item-detail-modal--form .modal-header {
  flex-shrink: 0;
}

.dr-item-detail-modal--form .dr-modal-form-scroll {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.dr-item-detail-modal--form .dr-modal-form-scroll > .modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
}

.dr-item-detail-modal--form .dr-modal-form-scroll > .modal-footer {
  flex-shrink: 0;
  padding: 0.75rem 1.25rem 1.25rem;
}

.dr-item-detail-modal--form .dr-modal-form-meta {
  flex: 1 1 100%;
  margin: 0 0 0.25rem;
}

.dr-item-detail-modal--form .dr-data-table tbody td:first-child {
  white-space: normal;
  word-break: break-word;
}

.dr-item-detail-modal--form .dr-data-table tbody td {
  vertical-align: top;
}

.dr-item-detail-modal--form .dr-data-table td .form-control {
  width: 100%;
  min-width: 0;
}

.dr-item-detail-modal--form .dr-data-table td .invalid-feedback,
.dr-item-detail-modal--form .dr-data-table td label.error {
  margin-top: 0.35rem;
  margin-bottom: 0;
}

/* ═══ 設計示範 layout（body.design-reference-body）：表單／列表／統計等字級與詳情頁一併調大 ═══ */
.design-reference-body .dr-item-form .form-label,
.design-reference-body .dr-filter-form .form-label {
  font-size: 1rem !important;
}

.design-reference-body .dr-item-form .form-control,
.design-reference-body .dr-item-form .form-select,
.design-reference-body .dr-item-form textarea.form-control,
.design-reference-body .dr-filter-form .form-control,
.design-reference-body .dr-filter-form .form-select {
  font-size: 1rem !important; /* 等同 Bootstrap fs-6，與標籤同階 */
}

.design-reference-body .dr-item-form .invalid-feedback {
  font-size: 0.875rem !important;
}

.design-reference-body .dr-alert {
  font-size: 1rem !important;
}

.design-reference-body .dr-section-hint {
  font-size: 1rem !important;
}

.design-reference-body .dr-card-intro {
  font-size: 1rem !important;
}

.design-reference-body .dr-callout__title {
  font-size: 1.05rem !important;
}

.design-reference-body .dr-callout__body {
  font-size: 1.0625rem !important;
}

.design-reference-body main h2.h5 {
  font-size: 1.25rem !important;
}

.design-reference-body .dr-stat-card__label {
  font-size: 1rem !important;
}

.design-reference-body .dr-stat-card__hint {
  font-size: 1rem !important;
}

.design-reference-body .dr-stat-card__btn-text .dr-stat-card__value {
  font-size: 1.25rem !important;
}

.design-reference-body .dr-stat-card__btn-text .dr-stat-card__label {
  font-size: 0.95rem !important;
}

.design-reference-body .dr-stat-card__pill {
  font-size: 0.9rem !important;
}

.design-reference-body .dr-data-table {
  font-size: 1.0625rem !important;
}

.design-reference-body .dr-pagination .page-link {
  font-size: 1rem !important;
}

.design-reference-body .dr-item-detail-modal .dr-item-detail-table__remarks {
  font-size: 1rem !important;
}

/* Card header */
.design-reference-body .card-header {
  background: #5c879e;
  color: #f8fafc;
  font-weight: 600;
  border-bottom: none;
}

/* jQuery Validate 錯誤訊息 */
.design-reference-body label.error {
  color: #dc3545;
  font-size: 0.875em;
  margin-top: 0.25rem;
  display: block;
}

/* 密碼小眼睛 */
.pw-toggle-wrap {
  position: relative;
}
.pw-toggle-wrap > .form-control {
  padding-right: 2.75rem;
}
.pw-toggle-btn {
  position: absolute;
  top: 0;
  right: 0;
  height: calc(1.5em + 0.75rem + 2px);
  width: 2.5rem;
  border: none;
  background: transparent;
  color: #6c757d;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  user-select: none;
}
.pw-toggle-btn:hover { color: #0d6efd; }

/* ═══ 拖曳上傳區 dr-dropzone ═══ */
.dr-dropzone {
  position: relative;
  border: 2px dashed #cbd5e1;
  border-radius: 0.65rem;
  padding: 2.5rem 1.5rem;
  text-align: center;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
  background: #f8fafc;
  cursor: pointer;
}
.dr-dropzone:hover {
  border-color: #93c5fd;
  background: rgba(59, 130, 246, 0.04);
}
.dr-dropzone--over {
  border-color: #3b82f6;
  background: rgba(59, 130, 246, 0.08);
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.12);
}
.dr-dropzone--has-file {
  border-color: #22c55e;
  background: rgba(34, 197, 94, 0.06);
}
.dr-dropzone__input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.dr-dropzone__icon {
  font-size: 2.75rem;
  color: #94a3b8;
  display: block;
  margin-bottom: 0.75rem;
  transition: color 0.2s;
  pointer-events: none;
}
.dr-dropzone--over .dr-dropzone__icon { color: #3b82f6; }
.dr-dropzone--has-file .dr-dropzone__icon { color: #22c55e; }
.dr-dropzone__text {
  font-size: 1rem;
  color: #475569;
  margin-bottom: 0.25rem;
  pointer-events: none;
}
.dr-dropzone__subtext {
  color: #94a3b8;
  font-size: 0.875rem;
  margin-bottom: 0.75rem;
  pointer-events: none;
}
.dr-dropzone__btn {
  pointer-events: none;
  position: relative;
  z-index: 0;
}
.dr-dropzone__filename {
  font-size: 0.9375rem;
  pointer-events: none;
}

/* medium-zoom 在 modal 內使用時，overlay 須高於 modal 的 z-index (1055) */
.medium-zoom-overlay {
  z-index: 2000;
}
.medium-zoom-image--opened {
  z-index: 2001;
}

/* ═══ SPO 參考價分析 — 品項詳情定義表 ═══ */
.dr-advice-detail-panel {
  overflow: hidden;
  border-radius: 0 0 var(--bs-card-border-radius, 0.375rem) var(--bs-card-border-radius, 0.375rem);
}

.dr-item-show-card > .card-body.p-0 {
  overflow: hidden;
  border-bottom-left-radius: var(--bs-card-border-radius, 0.375rem);
  border-bottom-right-radius: var(--bs-card-border-radius, 0.375rem);
}

.dr-advice-detail-panel .dr-advice-detail-table {
  font-size: 1rem;
  margin-bottom: 0;
}

/* 還原完整格線（table-bordered 需 border-collapse: collapse） */
.dr-advice-detail-panel .dr-advice-detail-table.table-bordered > :not(caption) > * > * {
  border-color: var(--bs-border-color, #dee2e6);
}

.dr-advice-detail-table .dr-advice-detail__section > th {
  background: #cbd5e1 !important;
  color: #0f172a;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  border-bottom: 2px solid rgba(51, 65, 85, 0.35);
  padding-top: 0.65rem;
  padding-bottom: 0.65rem;
}

.dr-advice-detail-table th.table-secondary {
  background: #e2e8f0 !important;
  color: #1e293b;
  font-weight: 700;
}

.dr-advice-detail-table .dr-price-value {
  font-variant-numeric: tabular-nums;
}

.dr-advice-edit-row > td {
  background: rgba(239, 246, 255, 0.55) !important;
  border-top: 2px solid rgba(92, 135, 158, 0.22);
}

.dr-advice-edit-panel {
  padding: 0.5rem 0.25rem;
}

.dr-row-error-highlight {
  background-color: #ffbae5 !important;
}

.dr-cell-price-ref {
  color: #dc3545 !important;
  font-weight: 700;
}

.dr-advice-status-card .card-body {
  padding-top: 0.85rem;
  padding-bottom: 0.85rem;
}

.dr-advice-status-hint {
  font-size: 0.9rem;
  color: #64748b;
  margin-bottom: 0.65rem;
}

.dr-advice-section-heading {
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
}

.dr-advice-section-heading .dr-item-show__section-title {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

/* 操作欄 th：固定最小寬度、不換行，防止被相鄰欄壓縮 */
.dr-op-col {
  width: 1%;
  white-space: nowrap;
}

/* 操作欄 td：自動偵測（含 flex-column 按鈕群）不需逐一加 class */
.dr-data-table td:has(> .d-inline-flex.flex-column) {
  width: 1%;
  white-space: nowrap;
}

/* 表格內一般頁面超連結：主題色、平時無底線，hover 才顯示 */
.dr-data-table a:not(.btn):not(.showModal) {
  color: #1d4ed8;
  text-decoration: none;
}

.dr-data-table a:not(.btn):not(.showModal):hover {
  color: #1e3a8a;
  text-decoration: underline;
}

/* Modal 觸發連結：虛線底線，與一般頁面導覽連結（實心底線）區隔；按鈕版 showModal 不受此規則影響 */
a.showModal {
  font-weight: 500;
  text-decoration: none;
  color: #1d4ed8;
  border-bottom: 1px dashed rgba(37, 99, 235, 0.5);
  cursor: pointer;
}

a.showModal:hover {
  color: #1e3a8a;
  border-bottom-color: #1e3a8a;
  border-bottom-style: solid;
}

.dr-data-table tbody tr.dr-row-rejected {
  background: rgba(241, 245, 249, 0.9) !important;
  text-decoration: line-through;
  color: #64748b;
}

/* ═══ SPO 參考價列表（彙整總表／分析結果）════════════════════════════════════ */

.dr-advice-list-card > .card-header {
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  color: #334155;
  font-weight: 600;
}

.dr-advice-list-card > .card-footer {
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
}

.dr-advice-markers {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  vertical-align: middle;
}

.dr-advice-marker {
  display: inline-block;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 2px;
  flex-shrink: 0;
}

.dr-advice-marker--over-sf { background: #c9f; }
.dr-advice-marker--step { background: #ccc; }
.dr-advice-marker--c-up { background: #f00; }
.dr-advice-marker--c-down { background: #f39; }
.dr-advice-marker--ma-up { background: #f93; }
.dr-advice-marker--ma-down { background: #fc9; }

.dr-advice-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.875rem;
  color: #475569;
}

.dr-advice-product-link {
  font-weight: 500;
}

.dr-data-table tbody tr.dr-advice-row--c-down > * {
  background-color: #ffbae5 !important;
}

.dr-data-table .dr-price-ref-highlight {
  color: #dc2626;
  font-weight: 600;
}

.dr-data-table .dr-price-ref-highlight--warn {
  color: #ca8a04;
  font-weight: 600;
}

.dr-filter-card__header .bi-funnel {
  opacity: 0.9;
}

/* SPO 參考價列表：篩選表單（緊湊） */
.dr-filter-card--compact > .card-header {
  padding: 0.35rem 0.75rem;
  font-size: 1rem;
}

.dr-advice-filter-body {
  padding: 0.65rem 0.85rem 0.75rem;
}

.dr-advice-filter-form .dr-filter-section {
  border: 1px solid #e2e8f0;
  border-radius: 0.375rem;
  padding: 0.5rem 0.65rem 0.45rem;
  margin-bottom: 0.5rem;
  background: #fff;
}

.dr-advice-filter-form .dr-filter-section--muted {
  background: #f8fafc;
}

.dr-advice-filter-form .dr-filter-section__legend {
  float: none;
  width: auto;
  padding: 0;
  margin-bottom: 0.4rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: #334155;
  line-height: 1.3;
}

.dr-advice-filter-form .dr-filter-section__hint {
  font-size: 0.875rem;
  color: #64748b;
  margin-bottom: 0.35rem;
  line-height: 1.35;
}

.dr-advice-filter-form .dr-filter-field__label,
.dr-advice-filter-form .form-label {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  color: #475569;
  margin-bottom: 0.2rem;
  line-height: 1.3;
}

.dr-advice-filter-form .form-control,
.dr-advice-filter-form .form-select {
  font-size: 1rem;
}

.dr-advice-filter-form .dr-filter-chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem;
}

.dr-advice-filter-form .dr-filter-chip-group .btn {
  --bs-btn-padding-y: 0.2rem;
  --bs-btn-padding-x: 0.5rem;
  --bs-btn-line-height: 1.3;
  font-size: 0.875rem;
  border-radius: 1rem;
}

.dr-advice-filter-form .dr-filter-chip-group .btn-check:checked + .btn-outline-secondary {
  background-color: #2563eb;
  border-color: #2563eb;
  color: #fff;
}

.dr-advice-filter-form .dr-filter-error-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr));
  gap: 0.3rem;
}

.dr-advice-filter-form .dr-filter-error-item {
  display: flex;
  align-items: flex-start;
  gap: 0.3rem;
  min-width: 0;
}

.dr-advice-filter-form .dr-filter-error-item .form-check-input {
  margin-top: 0.2rem;
  flex-shrink: 0;
}

.dr-advice-filter-form .dr-filter-error-item .form-check-input:disabled + .dr-filter-error-badge {
  opacity: 0.45;
  cursor: not-allowed;
}

.dr-advice-filter-form .dr-filter-error-badge {
  display: block;
  padding: 0.25rem 0.5rem;
  border-radius: 1rem;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.3;
  color: #fff;
  cursor: pointer;
  margin: 0;
}

.dr-advice-filter-form .dr-filter-error-badge--c-up { background: #dc2626; }
.dr-advice-filter-form .dr-filter-error-badge--c-down { background: #e879a9; }
.dr-advice-filter-form .dr-filter-error-badge--ma-up { background: #ea580c; color: #fff; }
.dr-advice-filter-form .dr-filter-error-badge--ma-down { background: #fcd34d; color: #422006; }

.dr-advice-filter-form .dr-filter-form__actions {
  margin-top: 0.15rem;
  padding-top: 0.5rem !important;
}

.dr-advice-filter-form .dr-filter-form__actions .btn {
  font-size: 1rem;
  --bs-btn-padding-y: 0.35rem;
  --bs-btn-padding-x: 0.85rem;
}

@media (max-width: 575.98px) {
  .dr-filter-error-grid {
    grid-template-columns: 1fr;
  }
}

/* SPO 檔案管理：區塊摺疊、系列卡標題（避免 card-header 淺色字疊白底） */
.design-reference-body .dr-file-section-card > .dr-file-section-card__header,
.design-reference-body .dr-file-group-card > .dr-file-group-card__header {
  background: #fff;
  color: #0f172a;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  font-weight: 600;
}

.dr-file-table__col-category {
  min-width: 11rem;
}

.dr-file-table__col-upload {
  min-width: 12rem;
}

.dr-file-table__col-note {
  min-width: 6rem;
  max-width: 14rem;
}

.dr-file-table__category {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
}

.dr-file-table__category-icon {
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dr-file-table__category-name {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 600;
  color: #0f172a;
  line-height: 1.35;
  align-self: center;
}

.dr-file-table__row--fixed > * {
  --bs-table-accent-bg: rgba(239, 246, 255, 0.45);
}

.dr-file-table__cell-version {
  width: 1%;
}

.dr-file-table__version {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
}

.dr-file-table__version-num {
  font-weight: 700;
  color: #0f172a;
  line-height: 1.2;
}

.dr-file-table__latest-badge {
  font-size: 0.65rem;
  font-weight: 600;
}

.dr-file-table__cell-actions {
  width: 1%;
  white-space: nowrap;
}

.dr-file-table__action-groups {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.45rem;
  flex-wrap: nowrap;
}

.dr-file-table__action-groups--single {
  justify-content: flex-end;
}

.dr-file-table__action-group {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.2rem 0.35rem;
  border-radius: 0.4rem;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: #f8fafc;
}

.dr-file-table__action-group .btn {
  padding: 0.2rem 0.45rem;
  line-height: 1.2;
}

.dr-file-table__action-placeholder {
  display: inline-block;
  min-width: 2.5rem;
  text-align: center;
  color: #cbd5e1;
  user-select: none;
}

.dr-file-table__row-empty > * {
  --bs-table-accent-bg: rgba(248, 250, 252, 0.9);
}

.dr-file-section-toggle .bi-chevron-down {
  display: inline-block;
  transition: transform 0.2s ease;
}

.dr-file-section-toggle:not(.collapsed) .bi-chevron-down {
  transform: rotate(180deg);
}

/* SPO 檔案上傳：變數帶入選項格 */
.dr-file-var-option {
  cursor: pointer;
}

.dr-file-var-option:has(input:checked) {
  border-color: var(--bs-primary) !important;
  background-color: rgba(13, 110, 253, 0.06) !important;
}