:root {
    --base-h: 207;
    --base-s: 53%;
    --base-l: 22%; /* Base button color */
}
/* -----------------------------
   SEARCH
--------------------------------*/
.search-box {
    border-radius: 24px;
    padding: 4px 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.search-box input {
    border: none;
    background: transparent;
    outline: none;
    font-size: 14px;
    width: 150px;
}
.search-box i {
    color: #888;
}
.btn-group .btn.active {
  background-color: hsl(var(--base-h), var(--base-s), var(--base-l));
  color: #fff;
  border-color: #0d6efd;
  transition: all 0.2s ease-in-out;
}

.top-action-buttons {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-bottom: 20px;
    margin-top: 10px;
    padding-right: 20px;
}

/* Icon button styling */
.icon-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    color: #fff;
    background-color: hsl(var(--base-h), var(--base-s), var(--base-l));
    font-size: 16px; /* icon size */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

/* Hover effect */
.icon-btn:hover {
    transform: scale(1.08);
    filter: brightness(1.15);
}

/* Dynamic shading */
.icon-btn:nth-child(1) { --i: 0; }
.icon-btn:nth-child(2) { --i: 1; }
.icon-btn:nth-child(3) { --i: 2; }
.icon-btn:nth-child(4) { --i: 3; }
.icon-btn:nth-child(5) { --i: 4; }
.icon-btn:nth-child(6) { --i: 5; }
.icon-btn:nth-child(7) { --i: 6; }
.icon-btn:nth-child(8) { --i: 7; }
.icon-btn:nth-child(9) { --i: 8; }
.icon-btn:nth-child(10) { --i: 9; }

/* Use HSL lightness variation for each */
.icon-btn:nth-child(n) {
    background-color: hsl(
        var(--base-h),
        var(--base-s),
        calc(var(--base-l) + (var(--i) * 6%))
    );
}