/* ============================================================
 * 【前端 · UI 样式】【不可删】 custom-select.css — DIV 模拟下拉的样式
 * 与 js/custom-select.js 成对出现，缺一不可。
 * 控制：外层 .cs-wrap / 触发按钮 .cs-trigger / 下拉面板 .cs-dropdown / 选项 .cs-option
 * 解决 Windows 原生 <select> hover 灰色条 → 改成蓝色高亮；亮色/深色主题同步。
 * ============================================================ */
/* ============================================================
   customSelect 组件样式：用 DIV 模拟的下拉面板
   - 替换浏览器原生 <select>，解决：
       1) Windows Chrome/Edge 下 option hover 灰色条无法改色
       2) 原生控件有时不显示下拉箭头
   - 亮色/深色主题同步
   - 使用方法：
       <script src="/js/custom-select.js"></script>
       window.customSelect('#filterCourse');
   ============================================================ */

.cs-wrap {
    position: relative;
    width: 100%;
    display: inline-block;
    vertical-align: middle;
}
.cs-trigger {
    width: 100%;
    height: 38px;
    padding: 0 34px 0 12px;
    border: 1px solid #ced4da;
    border-radius: 6px;
    background: #fff;
    color: #1f2937;
    font-size: 15px;
    line-height: 38px;
    cursor: pointer;
    position: relative;
    user-select: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* 右下方的下拉箭头（用 CSS border 画的 V 形，不依赖图片） */
.cs-trigger::after {
    content: '';
    position: absolute;
    right: 12px;
    top: 14px;
    width: 8px; height: 8px;
    border-right: 2px solid #0d6efd;
    border-bottom: 2px solid #0d6efd;
    transform: rotate(45deg);
    transition: transform 0.15s, top 0.15s;
}
.cs-wrap.open .cs-trigger::after {
    transform: rotate(-135deg);
    top: 17px;
    border-color: #0d6efd;
}
/* 小尺寸变体 cs-sm：原 select 带 form-select-sm/form-control-sm 时由 JS 自动添加。
   对齐 Bootstrap .form-select-sm / .form-control-sm / .btn-sm（均高 31px、圆角 4px、字号 .875rem），
   解决筛选栏里自定义下拉（原固定 38px）比同排输入框/按钮高的问题。 */
.cs-wrap.cs-sm .cs-trigger {
    height: 31px;
    line-height: 31px;
    padding: 0 30px 0 10px;
    font-size: 14px;
    border-radius: 4px;
}
.cs-wrap.cs-sm .cs-trigger::after { right: 10px; top: 11px; }
.cs-wrap.cs-sm.open .cs-trigger::after { top: 14px; }
.cs-wrap.open .cs-trigger,
.cs-trigger:focus {
    outline: none;
    border-color: #86b7fe;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}
.cs-panel {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
    max-height: 300px;
    overflow-y: auto;
    z-index: 1050;
    display: none;
    padding: 4px 0;
}
.cs-wrap.open .cs-panel { display: block; }
.cs-option {
    padding: 8px 14px;
    font-size: 14px;
    color: #1f2937;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background 0.08s, color 0.08s;
}
.cs-option:hover,
.cs-option.cs-hovered {
    background: #0d6efd;
    color: #fff;
}
.cs-option.cs-selected {
    background: #e7f1ff;
    color: #0a58ca;
    font-weight: 600;
}
.cs-option.cs-selected:hover,
.cs-option.cs-selected.cs-hovered {
    background: #0d6efd;
    color: #fff;
}
/* 把原生 <select> 藏起来（保持可获取 value） */
.cs-hidden-select {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}
/* bootstrap 深色主题：触发器/面板与 form-control 输入框同源（var(--bs-body-bg)/--bs-border-color），
   不再写死藏黑 #1a1a2e，避免下拉框比输入框黑一块 */
html[data-bs-theme="dark"] .cs-trigger { background: var(--bs-body-bg); color: var(--bs-body-color); border-color: var(--bs-border-color); }
html[data-bs-theme="dark"] .cs-trigger::after { border-color: #9ec5fe; }
html[data-bs-theme="dark"] .cs-wrap.open .cs-trigger::after { border-color: #9ec5fe; }
html[data-bs-theme="dark"] .cs-panel { background: var(--bs-body-bg); border-color: var(--bs-border-color); }
html[data-bs-theme="dark"] .cs-option { color: #e9ecef; }
html[data-bs-theme="dark"] .cs-option:hover,
html[data-bs-theme="dark"] .cs-option.cs-hovered { background: #0d6efd; color: #fff; }
html[data-bs-theme="dark"] .cs-option.cs-selected { background: #0a2a5e; color: #9ec5fe; }
html[data-bs-theme="dark"] .cs-option.cs-selected:hover,
html[data-bs-theme="dark"] .cs-option.cs-selected.cs-hovered { background: #0d6efd; color: #fff; }

/* 另外，给没挂 customSelect 的原生 <select.form-control> 统一加一个 SVG 蓝色箭头，
   保证视觉上一眼能区分输入框和下拉。 */
html[data-bs-theme="light"] select.form-control:not(.cs-hidden-select),
html[data-bs-theme="light"] select.form-select:not(.cs-hidden-select),
html[data-bs-theme="light"] select.custom-select:not(.cs-hidden-select) {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'><path fill='none' stroke='%230d6efd' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M3 6l5 5 5-5'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 14px 14px !important;
    padding-right: 36px !important;
}
html[data-bs-theme="dark"] select.form-control:not(.cs-hidden-select),
html[data-bs-theme="dark"] select.form-select:not(.cs-hidden-select),
html[data-bs-theme="dark"] select.custom-select:not(.cs-hidden-select) {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'><path fill='none' stroke='%239ec5fe' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M3 6l5 5 5-5'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 14px 14px !important;
    padding-right: 36px !important;
}