/**
 * Select2 配色覆盖 (Select2 theme override)
 *
 * Select2 自带的皮肤是一套中性蓝灰，跟站点的朱红／描金对不上，
 * 控件高度和圆角也和其它表单元素差半格。这里只改外观，不碰行为。
 *
 * 前后台加载同一个文件，两边外观一致。
 * 必须排在 select2.min.css 之后。
 */

:root {
  --s2-red:    #8B1F1F;
  --s2-gold:   #b49147;
  --s2-ink:    #1A1A1A;
  --s2-muted:  #8C8C8C;
  --s2-paper:  #FFFDF8;
  --s2-border: #E8E1D4;
  --s2-hover:  #F5F0E6;
}

/* ── 收起状态：与 .form-control / input 对齐 ── */
.select2-container--default .select2-selection--single {
  height: auto;
  min-height: 38px;
  padding: 4px 2px;
  background: #fff;
  border: 1px solid var(--s2-border);
  border-radius: 8px;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 28px;
  color: var(--s2-ink);
  padding-left: 10px;
  padding-right: 28px;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: var(--s2-muted);
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 36px;
  right: 6px;
}

/* 多选 */
.select2-container--default .select2-selection--multiple {
  min-height: 38px;
  background: #fff;
  border: 1px solid var(--s2-border);
  border-radius: 8px;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background: var(--s2-red);
  border: 0;
  color: #fff;
  border-radius: 5px;
  padding: 2px 8px;
  margin-top: 6px;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  color: rgba(255, 255, 255, .8);
  margin-right: 5px;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
  color: #fff;
}

/* 焦点态与站点其它控件一致 */
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--s2-gold);
  outline: 2px solid rgba(180, 145, 71, .35);
  outline-offset: 0;
}

/* ── 展开的下拉面板 ── */
.select2-container--default .select2-dropdown {
  background: var(--s2-paper);
  border: 1px solid var(--s2-border);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .14);
  overflow: hidden;
}
.select2-container--default .select2-search--dropdown {
  padding: 8px;
}
.select2-container--default .select2-search--dropdown .select2-search__field {
  border: 1px solid var(--s2-border);
  border-radius: 7px;
  padding: 8px 11px;
  font-size: 14px;
  color: var(--s2-ink);
  background: #fff;
}
.select2-container--default .select2-search--dropdown .select2-search__field:focus {
  outline: 2px solid var(--s2-gold);
  outline-offset: 1px;
}
.select2-container--default .select2-results__options {
  padding: 0 6px 6px;
  max-height: 260px;
}
.select2-container--default .select2-results__option {
  border-radius: 6px;
  padding: 8px 11px;
  font-size: 14px;
  color: var(--s2-ink);
}
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted {
  background: var(--s2-hover);
  color: var(--s2-ink);
}
.select2-container--default .select2-results__option[aria-selected="true"] {
  background: var(--s2-red);
  color: #fff;
  font-weight: 600;
}
.select2-container--default .select2-results__message {
  color: var(--s2-muted);
  font-size: 13px;
  padding: 12px;
  text-align: center;
}

/* ── 层级 (stacking) ──
 *
 * 前台的层序是：吸顶头部 1000 < 遮罩 1010 < 侧边抽屉 1020 < 搜索建议 1040。
 * 这里原本写死 1060，于是拉开右侧抽屉时，页面上已展开的 Select2 面板会浮在
 * 抽屉上面。
 *
 * 1005 刚好在页面内容与后台侧边栏（最高 1004）之上，又在前台遮罩与抽屉之下。
 * 后台的 Bootstrap 模态框是 1055/1056，模态框里的 Select2 必须更高 ——
 * 模态框打开时 body 会带上 .modal-open，据此单独抬高。
 */
.select2-container { z-index: 1005; }
body.modal-open .select2-container { z-index: 1060; }