/* date_range.css — 全站快捷日期区间胶囊（components/date_range.html 宏配套）
 *
 * 独立成文件、不参与 Tailwind 构建：预编译产物不含 hover/选中态这些组合类，
 * 类名漏进构建会静默无样式（本项目踩过的坑），独立文件一次生效、改模板不必重构建。
 *
 * 形态（业界控制台筛选条惯例）：小号浅色胶囊，hover 浮蓝，当前区间命中蓝底描边，
 * 悬停 title 显示该档的具体起止日期（由 date_range.js 填）。
 */
.dp {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 4px;
}
.dp-label {
    font-size: 12px;
    color: #9ca3af;
    margin-right: 4px;
    flex-shrink: 0;
}
.dp-btn {
    font-size: 12px;
    line-height: 1;
    padding: 5px 10px;
    border-radius: 6px;
    color: #6b7280;
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    font-family: inherit;
    transition: color .15s ease, background-color .15s ease, border-color .15s ease;
    flex-shrink: 0;
}
.dp-btn:hover {
    color: #2563eb;
    background: #eff6ff;
}
.dp-btn.on {
    color: #1d4ed8;
    background: #eff6ff;
    border-color: #bfdbfe;
    font-weight: 600;
}
/* 密集工具栏降级：宽度不足时胶囊组自身横向滚动，不撑破单排布局 */
.dp--nowrap {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
}
.dp--nowrap::-webkit-scrollbar {
    display: none;
}