/* Left grouping: Sort + Filter next to each other */
.timeline-sort,
.timeline-filter {
    display: inline-flex;
}

/* Place the two selects side-by-side tightly */
.timeline-sort select,
.timeline-filter select {
    margin-right: 12px;
}

/* --- SELECT STYLING (Material-ish) --- */
.timeline-sort select,
.timeline-filter select {
    appearance: none;
    padding: 8px 36px 8px 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
    background: #fafafa;
    cursor: pointer;
    transition: 0.2s ease;
    position: relative;
}

/* Hover / Focus */
.timeline-sort select:hover,
.timeline-filter select:hover {
    border-color: #aaa;
}
.timeline-sort select:focus,
.timeline-filter select:focus {
    outline: none;
    border-color: #6200ee;
    box-shadow: 0 0 0 2px rgba(98,0,238,0.15);
}

/* Optional: add a Material-style downward icon using a pseudo-element */
.timeline-sort select::after,
.timeline-filter select::after {
    content: "";
}


.sort-filter {
    gap: 1rem;
    display: flex;
}

/* Label icons next to selects */
.icon-label {
    display: flex;
    align-items: center;
    margin-right: 6px;
    opacity: 0.6;
    transition: opacity 0.2s ease;
}
.icon-label:hover {
    opacity: 1;
}