/* ============ 顶部筛选条 ============ */
.filter-bar {
    position: sticky;
    top: 90px;
    z-index: 100;
    background: var(--hljs-background);
    box-shadow: 1px 1px 10px 1px var(--border-color);
    padding: 12px 0 16px 12px;
    border-radius: 16px;
    box-sizing: border-box;
}

@media (max-width: 1200px) {
    .filter-bar {
        transition: transform .28s ease, opacity .18s;
        will-change: transform;
    }
    .filter-bar.is-stuck.filter-collapsed {
        transform: translateY(-110%); /* 向上推出 */
        opacity: 0;
        pointer-events: none;
    }
    .filter-bar.is-stuck.filter-expanded {
        transform: translateY(0);      /* 从上进入 */
        opacity: 1;
        pointer-events: auto;
    }
}

/* 两行布局：第一行栅格，第二行 chips */
.filter-row {
    display: grid;
    gap: 12px;
}

/* 桌面端：时间 | 地点 | 搜索 | 操作 */
.filter-row--controls {
    grid-template-columns: minmax(260px, 2fr) minmax(260px, 2fr) minmax(180px, 1fr) auto;
    align-items: center;
}

/* 第二行：chips + 重置 按钮（按钮顶右对齐，跟随第一行） */
.filter-row--chips {
    margin-top: 8px;
    grid-template-columns: 1fr auto;            /* 左：chips 右：重置 */
    grid-template-areas: "chips reset";
    align-items: start;                          /* 按钮顶对齐 */
}

/* 组与标签 */
.filter-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.filter-label {
    font-weight: 600;
    color: var(--text-color);
    margin-right: 2px;
}

/* 统一 select 样式 */
.filter-bar select {
    appearance: none;
    background: var(--light-bg-color);
    color: #333;
    border: none;
    border-radius: 12px;
    padding: 8px 25px 8px 13px;
    min-width: 65px;
    font-size: 13px;
    line-height: 24px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23666'%3E%3Cpath d='M7 10l5 5 5-5H7z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px;
}

.filter-bar select:disabled {
    opacity: .45;
    pointer-events: none;
}

/* 操作区 */
.filter-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.btn-reset {
    padding: 4px 12px;
    margin-right: 12px;
    font-size: 14px;
    border-radius: 10px;
    border: 1px solid #4636ff;
    background: var(--blue-color);
    color: #fff;
    cursor: pointer;
    transition: .15s ease;
    text-align: center;
}

.btn-reset:hover {
    background: #fff;
    color: #333;
}

.btn-reset:disabled {
    opacity: .5;
    cursor: not-allowed;
}

/* 已选 chips：自动换行，过多时可横向滚动 */
.chips {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    max-height: 80px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 2px; /* 让滚动条不顶着 */
}

/* chips 放在左列，允许换行 */
#chips { grid-area: chips; align-content: flex-start; min-width: 0; }

.chip {
    background: #e0e7ff;
    color: #2740ff;
    font-size: 12px;
    font-weight: 500;
    padding: 3px 10px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    white-space: nowrap;
    border: 1px solid rgba(39, 64, 255, .15);
}

.chip i {
    margin-left: .5em;
}

.chip button {
    background: none;
    border: none;
    color: inherit;
    margin-left: 6px;
    font-size: 14px;
    cursor: pointer;
}

/* 当没有任何 chips 时，隐藏整行（JS 会切换 .is-empty） */
.filter-row--chips.is-empty {
    display: none;
}

/* —— 顶栏 controls：用 grid areas 指定布局 —— */
.filter-row--controls {
    display: grid;
    gap: 12px;
    align-items: center;
    /* 桌面默认：时间 | 地点 | 搜索 | 操作 */
    grid-template-columns: minmax(260px, 2fr) minmax(260px, 2fr) minmax(220px, 1fr) auto;
    grid-template-areas: "time place search actions";
}

/* 当 chipsRow 被写在 controls 里面时：强制换到下一行并横跨所有列 */
.filter-row--controls > .filter-row--chips {
    grid-column: 1 / -1;   /* 占满整行 */
    margin-top: 8px;       /* 与上方分隔 */
}

#timeGroup {
    grid-area: time;
}

#placeGroup {
    grid-area: place;
}

#searchGroup {
    grid-area: search;
    width: auto;          /* 交由列宽控制 */
    justify-self: stretch;/* 占满其列，避免列内空白 */
}

.filter-actions {
    grid-area: actions;
}

/* chips 行里的重置按钮容器：右列、顶端、靠右 */
.filter-row--chips .filter-actions {
    grid-area: reset;
    justify-content: flex-end;
    align-self: start;
}

/* 搜索框样式 */
.filter-bar .search { width: 100%; }
.filter-bar .search form { position: relative; display: block; }
.filter-bar .search input {
    width: 100%;
    background: var(--light-bg-color);
    border: none;
    border-radius: 12px;
    padding: 8px 40px 8px 12px;
    font-size: 13px;
    line-height: 24px;
    box-sizing: border-box;
}
.filter-bar .search button {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 16px;
    color: #666;
}
.filter-bar .search button:hover { color: var(--blue-color); }


/* 992–1200：时间与地点同一行；搜索换到下一行，操作列保持在右侧 */
@media (min-width: 992px) and (max-width: 1200px) {
    .filter-row--controls {
        /* 三列：time | place | actions；第二行 search 占两列 */
        grid-template-columns: 1fr 1fr auto;
        grid-template-areas:
          "time   place "
          "search search";
    }
    .filter-bar select {
        padding: 6px 44px 6px 13px;
    }
}

/* 641–991：time 独占一行；第二行 place；第三行 search | actions */
@media (min-width: 641px) and (max-width: 991px) {
    .filter-row--controls {
        grid-template-columns: 1fr auto;
        grid-template-areas:
          "time   time"
          "place  place"
          "search actions";
    }
    .filter-bar select {
        padding: 6px 54px 6px 13px;
    }
}

@media (max-width: 991px) {
    #searchGroup { width: 100%; }
}

/* ≤ 640：单列纵向堆叠（时间、地点、搜索、重置各占一行） */
@media (max-width: 640px) {
    .filter-row--controls {
        grid-template-columns: 1fr;
        grid-template-areas:
          "time"
          "place"
          "search"
          "actions";
        gap: 10px;
    }

    .filter-group {
        gap: 8px;
    }

    .filter-label {
        display: inline-block;
        min-width: 3em;
    }

    .filter-bar select {
        flex: 1 1 auto;
        min-width: 40px;
    }
}

.updates-sentinel {
    font-size: 20px;
    text-align: center;
}

/* ===== 窄屏：给筛选条左右留白 ===== */
@media (max-width: 991px) {
    .filter-bar {
        margin-left: 16px;
        margin-right: 16px;
        max-width: calc(100% - 32px);
    }
}
@media (max-width: 640px) {
    .filter-bar {
        margin-left: 12px;
        margin-right: 12px;
        max-width: calc(100% - 24px);
        padding-right: 12px;
    }
    .btn-reset {
        margin-right: 0;
    }
}